By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,081 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

Basic question re margins and padding

P: n/a
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
Jan 15 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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
Jan 15 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.