Basic question re margins and padding

[Jeremy]

Hi all,

I have a container which I want to have a consistant gap around the
edges before any content starts. The obvious way to do this is the
padding style.

However, anything with a margin then adds the margin to the already
existing padding whitespace, so for things like paragraphs which
require legitimate whitepace between them, this whitespace pushes them
away from the edges of the container.

I've setup a very simple example here:
http://www.thebunnyshed.co.uk/htmltest.htm

What is the "correct" way to do this?

1) Scrap the padding on the container, and explicitly give everything
on the edges an appropriate margin? (yuck!)

2) Fudge the margins on certain elements. For instance I could specify
only a bottom margin for <pin my example which would mean only the
bottom of the container is too far down. I could then further fudge
this somehow by using a negative padding-bottom on the container.

3) Live with it because it's "correct". ie paragraphs have a margin
therefore they SHOULD be away from the container edges. (it just
doesn't look right)

4) Insert clever CSS guru answer here.

Many thanks,
Jeremy

[Jonathan N. Little]

Je****@thebunnyshed.co.uk wrote:

Hi all,

I have a container which I want to have a consistant gap around the
edges before any content starts. The obvious way to do this is the
padding style.

However, anything with a margin then adds the margin to the already
existing padding whitespace, so for things like paragraphs which
require legitimate whitepace between them, this whitespace pushes them
away from the edges of the container.

I've setup a very simple example here:
http://www.thebunnyshed.co.uk/htmltest.htm

What is the "correct" way to do this?

1) Scrap the padding on the container, and explicitly give everything
on the edges an appropriate margin? (yuck!)

2) Fudge the margins on certain elements. For instance I could specify
only a bottom margin for <pin my example which would mean only the
bottom of the container is too far down. I could then further fudge
this somehow by using a negative padding-bottom on the container.

That is what your should do,

..container p { margin-top: 0; }

The margin collapses anyway to 40px vertically on sibling P's as it is
supposed to. Confirm by adding background color

p, img { background-color: #eee; }

and measure and you will see on 40px not 80px between paragraphs.

example on W3c http://www.w3.org/TR/CSS21/box.html#mpb-examples

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com