Question

我有一个div，它应该显示文件输入和提交输入。这很好，但是我一直在底部收到一条不需要的空行。

问题照片：

以下是我的div的HTML代码：

    <div id="change_pp"> 
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="pp_file"/>
<input type="submit" name="pp_submit" value="Upload Photo"/>
</form>
</div>

这是CSS：

    #change_pp
{
background:#f9f9f9;
border-bottom: 1px dashed #ccc;
border-left: 1px dashed #ccc;
border-right: 1px dashed #ccc;
width:18%;
margin-left:3.5%;
padding:0;
}

#change_pp input[type=file]
{
width:100%;
}

此外，这是一个小提琴我的整个CSS，以显示我以前的CSS没有影响这个https://jsfiddle.net/bmp3my4c/

正如你所知，小提琴工作正常并且代码应该可以正常工作，但是在所有主流浏览器中我都收到了不需要的空格。

注意：我知道小提琴工作正常，但在浏览器中div仍然出现在白色空间中。这是奇怪的部分。

Answer 1

根据您的评论，您缺少doctype。这就是导致问题的原因。在您的第一行添加适当的文档类型<!DOCTYPE html>，问题将在不修改您原来的内容的情况下消失。

所有现代网页都必须具有doctype。没有一个，你处于怪癖模式并使用不正确的盒子模型。添加要放入标准模式的doctype。

Answer 2

添加以下CSS规则，它应该可以解决问题：

form {
    margin-bottom: 0;
}

编辑：正如Rob指出的那样，这解决了问题，但不是导致问题的原因。问题是缺少Doctype，如他的回答所示。

div中奇怪的空白问题

2 个答案: