Почему элементы уровня блока заставляют вертикальную полосу прокрутки и пустое пространство вверху? - PullRequest
Новая
       10

Почему элементы уровня блока заставляют вертикальную полосу прокрутки и пустое пространство вверху?

1 голос
/ 15 июня 2011

<h3> в следующем коде вызывает вертикальную полосу прокрутки, что, в свою очередь, приводит к появлению пробела (это красный; т.е. body) вверху страницы.

Почему? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > 
    <title>Test</title>



<style type="text/css">

html { height: 100%; }



body {
    background-color:#f00;
    margin:0; 
    padding:0;
    height:100%;
} 



#divParent1 {
    background-color:#0f0;
    background-image:url("example1_bg.png");
    background-repeat: repeat;
    height:100%;
    margin:0 auto;
    padding:0;
}



#div1 { 
    background-image:url(example1_white_center.png); 
    background-repeat: repeat-y;
    background-position: center;
    width:1200px;
    min-width:1200px;
    _width:1200px;
    height:100%;
    margin:0 auto;
}



#div2{
    background-image:url(example1_dgreen_blank.png); 
    background-repeat: no-repeat;
    height:100%;
    margin:0;
}

</style>

</head>







<body>

<div id="divParent1">
    <div id="div1">
        <div id="div2">
            <div style="width:100%; position:relative; top:240px; margin:0;">
                <div style="margin:0 auto; width:570px; background-color:#00f; ">

<h3>LOLOL</h3>

hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>hi<br>

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




</body>
</html>

Примечание. Этот результат нельзя воспроизвести на jsfiddle, что еще больше сбивает меня с толку.

1 Ответ

1 голос
/ 15 июня 2011

Итак, сегодня вы узнаете что-то новое о HTML.Поля объединить / свернуть / объединить.Таким образом, поле на элементе H3 комбинируется с полем на элементе body и дает элементу body запас.

См. http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Вы можете добавить промежуточные элементы (padding, border), чтобы предотвратить это, или удалите поле из элемента H3.

Это было сделано (я считаю), потому что именно так работал оригинальный тег P.Выше и ниже тега P было некоторое пространство - но если у вас было два тега P один за другим, вы получали не дважды, а скорее всего один раз.Чтобы повторить это поведение, когда HTML переключился на CSS, они создали 'margin' и заставили его объединиться.

...