CSS положительная прокладка с отрицательным краем

Question

В проекте Sonata я видел следующий css.

HTML:

<div class="content"> 
    <div class="header"></div> 
</div> 

CSS:

.content { 
    padding: 20px; 
    margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */ 
} 

.header { 
    padding: 20px 20px 10px; 
    margin: -20px -20px 20px; 
} 

Мой вопрос, какова цель/преимущество наличия положительных ПРОКЛАДКИ И затем свести их с отрицательными полями? В коде есть комментарий об отрицательной марже, но я действительно не понимаю. Почему бы не просто установить как margin, так и padding на 0?

Спасибо!

Answer 1

Пожалуйста, обратите внимание на CSS Box Model - вы заметите, что граница находится между отступом и краем, и, таким образом, вышеуказанное, скорее всего, используется для перемещения границ наружу.

Answer 2

Box-проклейка может помочь вам очистить ваш код с помощью CSS3: http://css-tricks.com/box-sizing/

Answer 3

Одно общего использование дополнения компенсировано отрицательного край, как это исправить браузеры навигационных в неправильном место при использовании идентификаторов фрагмента в комбинации с a position: fixed.

Предположим, у меня есть страница, как это ...

<div class="fixed-navbar">Navbar Stuff!</div> 

<a href="#interesting-content">Link to interesting content below</a> 
<p>Lots of content that takes up space and makes the page scroll...</p> 

<h2 id="interesting-content">Some interesting content</h2> 
<p>Bla bla bla</p> 

<p>More really tall content</p> 

... где .fixed-navbar имеет этот CSS:

position: fixed; 
height: 50px; 

Когда я посещаю мою страницу и нажмите на ссылку, браузер будет прокручивать <h2> до верхней части страницы ... в результате чего он будет перекрывать фиксированный навигатор! Это, вероятно, нежелательно. (Fiddle)

Однако, мы можем исправить это с помощью следующего CSS:

#interesting-content { 
    padding-top: 50px; 
    margin-top: -50px; 
} 

(Fiddle)

Теперь, когда мы спрашиваем браузер, чтобы перейти к идентификатор фрагмента, он переходит к верхняя часть прокладки, одна высота над уровнем экрана над фактическим содержимым. Это позиционирует фактическое содержимое прямо там, где мы хотим.