Вопросы Теги

CSS-маржа, подталкивающая элемент body

I Я устанавливаю поле для элемента div, однако элемент body также получает это поле.

Рассмотрим этот код: 

<!-- HTML -->
<body>
  <div>
  </div>
</body>

<!-- CSS -->
<style>
  html,body {
   height:100%;
   margin:0;
   padding:0;
   outline:1px solid blue;
  }

 div {
   margin:20px;
   outline:1px solid red;
 }

</style>

Это результат и проблема: http://i54.tinypic.com/29ve1zl.jpg

Пока что я решил проблему, добавив свойство border: 1px solid transparent; к элементу body. Это разрушает 100% высоту, потому что полосы прокрутки появляются из-за границы 1px . Почему это происходит?

ВОЗМОЖНОЕ РЕШЕНИЕ (спасибо за помощь): Добавьте padding-top: 1px и margin-top: -1px таким образом 100% высота не будет испорчена полосами прокрутки, и вы избежите коллапса поля.

5
задан Josh Darnell 3 January 2012 в 19:59
поделиться