Здесь я разместил демо http://jsfiddle.net/LxYMv/1/.
Как вы можете видеть, <body> получает margin-top: 10px из верхнего div, а затем <html> просканируется черный фон. Означает ли это, что я не могу дать верхнему div положительную маржу?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}
html{background:black}
body{background:white}
</style>
</head>
<body>
<div style="margin-top:10px;background:red;height:100px">Here the top div begins</div>
<div style="height:800px">A long long div</div>
</body>
</html>
Это называется разворот маржи.
Когда элемент с пометкой находится внутри элемента без прокладки или границы, маржа будет применяться вне родительского элемента, а не между дочерним элементом и родительским ребром.
Основной причиной такого поведения является то, что маржа указывает минимальное расстояние между элементами, а не расстояние вокруг элемента, например padding, определяет расстояние вокруг содержимого элемента.
Вы можете обойти это, добавив padding: 0.01px; в <body>. Поскольку он настолько мал, он эффективно округляется до 0px, но затем тело начинается там, где оно должно.
Это означает, что если ребенок начнет точно, где родительский, у которого нет поля, начинается, тогда на него повлияет маржа childs. Вы можете использовать свойство padding, чтобы получить желаемый результат:
body{
padding-top:10px;
}
Вот как работают поля. Поля родительского и дочернего элементов сворачиваются вместе так же, как элемент, появляющийся ниже другого, рухнет. Используйте padding для дочернего элемента, если вы хотите, чтобы родительский элемент не перемещался.
Я думаю, что модель коробки объясняет это поведение: http://www.w3.org/TR/CSS2/box.html В частности, эти строки: "Свернутый запас считается смежным с другой маржой, если какой-либо из его компонентных полей примыкает к этой границе". & Амп; "Верхняя граница элемента блока потока в потоке сворачивается с его первым верхним полем верхнего уровня на уровне блока, если элемент не имеет верхней границы, нет верхнего заполнения, а у ребенка нет разрешения."
Вместо добавления поля к дочернему элементу вы можете добавить одноименное дополнение к родительскому элементу или применить некоторую границу к родительскому элементу, и вы получите то, что хотите.
Как сказал @Guffa:
Это называется сбрасыванием краев.
Когда элемент с запасом находится внутри элемента без прокладки или границы, маржа будет применяться вне родительского элемента вместо между дочерним элементом и родительским ребром.
Чтобы разработать немного: решение заключается в использовании отступов вместо поля. В вашем случае вы должны добавить padding-top: 10px в body и удалить margin-top из <div>
Если вы хотите создать контейнер, который предотвратит сбой внутренних полей, выходящих за пределы контейнера, вам нужно будет добавить дополнение или границу к контейнеру. Если вы не хотите ни одной из этих видимых функций, вы можете добавить отрицательный запас и отменить его с положительным отступом. Вот так:
<div style="margin:-1px; padding:1px;"> ... </div>
вы можете сделать то же самое на своем элементе тела, если хотите.
Изменить: вот ваш jsFiddle, обновленный, чтобы использовать трюк margin/padding в элементе body
Попробуйте добавить это:
<div style="overflow:hidden;height:1%">
<div style="margin-top:10px;background:red;height:100px">Here the top div begins</div>
</div>
Я думаю, он решает ваши проблемы.