Question

令人难以置信的简单的HTML - 但不显示我的期望。

我正在尝试创建一个空白div，在页面顶部显示为空格，style="height: 400px;"

即使我指定了一个高度，我的空div也不会显示。我在这里错过了什么？

更新：我的主要问题是：为什么即使设置了高度，也不会显示空div？或者，显示空div需要的基本style规则是什么？

完整代码：

<html>
<head><title>Site Name</title>
</head>
<body>
<div style="height:400px; width:100%; margin:0; padding:0; position:absolute;"></div>
<div style="width: 50%; margin: auto;">
<img src="logo.gif"></div> 

<div style="width: 50%; margin: auto;"></div>

</body>
</html>

Answer 1

如果您只想添加空格，请尝试使用

<div style="height:400px; width:100%; clear:both;"></div>

FIDDLE

或者您可以像body { padding-top: 400px; }

一样向身体添加填充

Answer 2

您要查找的css样式为min-height: 20px;默认情况下，没有内容的div的高度为0，因为自动设置是默认设置，其大小适合内容。

Answer 3

您需要添加背景，以便看到白框。

background-color:black;

你将无法看到它。

Answer 4

在您的div中添加一些空格，它将起作用。

<div style="height:400px; width:100%">&nbsp;</div>

Answer 5

它没有显示的原因是因为你的风格有position:absolute。这意味着div将独立于其他元素定位，并且对后面的div没有影响。因此，您的第二个div基本上是屏幕上的第一个div。

Answer 6

所以我将您的代码放入编辑器，并添加了如下所示的黑色背景...

<div style="height:400px; 
            width:100%; 
            margin:0; 
            padding:0; 
            position:absolute;           
            background-color: #000;">
</div>

对我来说很好。我不确定您期望看到的是什么，但是您可以通过“ position：absolute”获得一些看似奇怪的结果。

绝对表示元素相对于其第一个定位的祖先元素定位。
对于一般用途，“位置：相对”通常会返回所需的结果。相对基本上是指元素相对于其正常位置定位，因此您可以通过left：20px或right：20px;来移动它；走到您希望更好的地方很高兴。要考虑的另一件事是div元素的display属性。我注意到您没有设置它，并且div的显示方式遇到了麻烦。通常将div元素设置为“ display：block;”，尽管并非总是如此。我总是确保使用div元素定义display属性，因为我发现，如果您不尝试在浏览器中渲染对象，则根本不会显示该对象，否则它可能会以不希望的方式显示。

Answer 7

对于寻找空白的人（不完全是一个空的div），您可以添加一个空的 span ，这样div就不再被认为是空的。

避免使用 ，因为默认的font-size会使div超出您的期望。

div{
    height:200px;
    background:#ff8800;
}

<div><span></span></div>

空div（带样式：高度）将不会显示

7 个答案: