HTML / CSS Margin проблема - PullRequest
Новая
       3

HTML / CSS Margin проблема

1 голос
/ 08 января 2011

Я занимаюсь разработкой сайтов уже 3 года, и сегодня нашел то, чего не мог понять. Код, с которым я работаю: http://pastie.org/1439629

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>Page Title</title>
 <style type="text/css" media="screen">
  .box{
   margin:50px 0;
   background:red;
   border:1px solid black;
  }
 </style>
</head>
<body>
 <div class="box">
  Y
 </div>

 <div class="box">
  X
 </div>
</body>

Теперь проблема в том, что я не могу понять, почему два Div с классом BOX делят одно и то же пространство. то есть нижнее поле Y совпадает с верхним полем X. Разве между ними должно быть не более 100 пикселей вместо 50 пикселей?

Edit: Если я отредактирую CSS на 

.box{
    margin:50px;
    background:red;
    border:1px solid black;
    float:left;
    height:50px;
    width:50px;
}

тогда расстояние между ними должно быть 50px, но нет! теперь его 100 пикселей. Почему?

Извините за такой тривиальный вопрос, но я не мог понять.

Ответы [ 2 ]

5 голосов
/ 08 января 2011

Такое поведение является частью стандарта HTML.см .: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

1 голос
/ 08 января 2011

Я думаю, что после отступа 50px снизу для div y, div x проверьте верхнюю границу, и это 50px. тогда нет необходимости снова выделять 50 пикселей сверху.

...