Question

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?

Answer 1

Try this

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