Geek asks and answers

Positive CSS padding with negative indentation

In the Sonata project, I saw the following 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;
}

My question is: what is the purpose / advantage of having positive paddings and then denying them with negative fields? There is a comment about negative margin in the code, but I really don't understand. Why not just set both margins and padding to 0?

Thank!

+5
source share
3 answers

Please take a look at the CSS Box Model - you will notice that the border is between the indent and the margin, and thus the above is most likely used to move the borders outward.

0
source

, , , 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)

, , , . , .

+3

Field size can help you clear the code using css3: http://css-tricks.com/box-sizing/

0
source

More articles:


All Articles