CSS-поле, нажимающее на элемент body - PullRequest
Новая
       27

CSS-поле, нажимающее на элемент body

5 голосов
/ 12 октября 2011

Я устанавливаю поле для элемента 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% не будет разрушена полосами прокрутки, и вы избежите падения полей.

Ответы [ 3 ]

3 голосов
/ 12 октября 2011

Это похоже на проблему, с которой я столкнулся: Поля и отрицательные поля .Я решил свою проблему, поставив верхний слой, а не границу, может, это немного лучше работает с вашим дизайном?В противном случае попробуйте эту ссылку: http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

2 голосов
/ 12 октября 2011

Это вызвано эффектом, известным как коллапс полей.

Некоторые смежные поля объединяются в единое поле. Считается, что эти поля «разрушаются». Поля соприкасаются, если нет непустого содержимого, отступов или границ или зазоров для их разделения.

http://www.w3.org/TR/css3-box/#collapsing-margins

0 голосов
/ 12 июня 2019

Я знаю, что это старый вопрос, но я просто хочу отметить, что в примере, приведенном в вопросе, можно использовать отступы вместо полей: 

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

<!-- CSS -->
<style>
  html, body {
    box-sizing: border-box; /* padding makes part of the */
    height: 100%;           /*  box whose height is 100% */
    margin: 0;
    padding: 0;
    outline: 1px solid blue;
  }
  
  body {
    padding: 20px;
  }
  
  div {
    outline: 1px solid red;
  }

</style>
...