CODEWITHSUNDEEP
htmlcssmarginpadding
Oliver Tappin
Oliver Tappin

Reputation: 2541

<div> padding affecting <p> margin

I have a design created using html and css and have come across an issue that confuses me.

The div tag that surrounds my p tag has a padding of 0 20px;. The p tag is either as default (according to the font-size) or is stated in the css.

The issue: The margin of the p tag is not shown unless there is a padding of at least 1px in the surrounding div.

HTML

<div>
    <p>Why hello there Sir!</p>
</div>

CSS

div {
    padding:0 20px;
    /* padding:1px 20px; */
    /* fixes the issue but adds an extra pixel, which I don't want */
    background:#ccc;
}
p {
    margin:20px 0;
}

Here's a working example (with a button fixing the issue): http://jsfiddle.net/hrRNu/

I would really like this to work without any padding there at all. Any ideas?

Upvotes: 2

Views: 3018

Answers (2)

kleinfreund
kleinfreund

Reputation: 6800

This is what is called "collapsing margins" and is normal behavior. See more here: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Setting p – a natural block level element – as inline-block is not really an appropriate "fix" for your problem.

You could instead set the margin to the div itself.

Upvotes: 5

Antony
Antony

Reputation: 15106

Try this

div {
    background:#ccc;
    padding:0 20px;
}
p {
    display: inline-block;
    margin:20px 0;
}

Upvotes: 1

Related Questions