Почему моя граница не доходит до верхней части экрана? - PullRequest
Новая
       3

Почему моя граница не доходит до верхней части экрана?

0 голосов
/ 06 апреля 2009

У меня есть веб-сайт с таким макетом: 

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <body style="margin:0px">
    <div style="border-left: 5px solid black;">
      <div><!-- x -->
        <div>
          <div>
            <div style="margin-top: 100px">
              fish
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Я хочу, чтобы вся страница имела рамку внизу слева. Тем не менее, кажется, что верхнее поле глубинного вложенного элемента div в 100px вызывает сдвиг границы левого предка.

По какой-то причине, если я раскомментирую "x", все выглядит отлично.

Что происходит?!?!

Ответы [ 2 ]

4 голосов
/ 06 апреля 2009

Поля разрушаются даже при наличии элементов, поэтому ваше внутреннее поле div толкает внешний div вниз. К счастью, решение простое: добавьте "overflow: auto" к вашим внешним div стилям (стиль с рамкой). 

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <body style="margin:0px">
    <div style="border-left: 5px solid black; overflow: auto;">
      <div><div><div>
        <div style="margin-top: 100px">fish</div>
      </div></div></div>
    </div>
  </body>
</html>
1 голос
/ 06 апреля 2009

По какой-то причине, если я раскомментирую "x", все выглядит отлично.

Да, с помощью 'x' на пути есть некоторый контент, между дочерним margin-top и родительским margin-top. Поля не могут быть свернуты через контент, отступы или границы, поэтому другое исправление заключается в том, чтобы поместить любое количество верхнего отступа или границы на любой элемент между выделенным разделителем и ограниченным разделением. Например, если граничный элемент также имеет верхнюю границу, левая граница подпрыгнет вверх, чтобы присоединиться к нему сверху.

Ответ Бена является распространенным методом, использующим побочный эффект для предотвращения разрушения полей, из-за этой строки в разделе 8.3.1 CSS2.1 :

Вертикальные поля элементов с «переполнением», отличным от «видимого», не разрушаются вместе со своими дочерними элементами в потоке.

Но для ясности, возможно, лучше избежать коллапса маржи, если вы можете. Использование отступов в предпочтении к верхним и нижним полям, где это возможно, обычно является хорошей тактикой, поскольку правила свертывания полей в CSS не интуитивны и бесполезны, и будут кусать вас снова и снова - даже игнорируя ошибки в реализации IE6.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...