Пустое div (со стилем: высота) не будет отображаться

Невероятно простой кусок HTML - но не отображающий, как я ожидал бы.

Я пытаюсь создать пустой div, который отображается как пробел в верхней части страницы, с style="height: 400px;"

Хотя я указал высоту, мой пустой div не будет отображаться. Что мне здесь не хватает?

UPDATE: мой главный вопрос: почему пустой div не отображается, даже если он имеет высоту? Или, каковы основные правила style необходимые для отображения пустого div?

Полный код:

<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>

Ответы

Ответ 1

Если вы просто хотите добавить пробел, попробуйте это

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

FIDDLE

или вы можете просто добавить отступы к телу, как body { padding-top: 400px; } body { padding-top: 400px; }

Ответ 2

Стиль css, который вы ищете, - min-height: 20px; По умолчанию div без содержимого будет иметь высоту 0 из-за того, что автонастройка является по умолчанию, которая сама по себе соответствует содержанию.

enter image description here

enter image description here

Ответ 3

Вам нужно добавить фон, чтобы вы могли видеть белый квадрат.

background-color:black;

Вы не сможете это увидеть.

Ответ 4

Причина, по которой он не отображался, заключается в том, что у вас была position:absolute в вашем стиле. Это означает, что div будет располагаться независимо от других элементов и не будет влиять на следующий div. Таким образом, ваш второй div по сути является первым div на экране.