467,163 Members | 966 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,163 developers. It's quick & easy.

Basic question re margins and padding

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
  • viewed: 1548
Share:
1 Reply
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.

Similar topics

9 posts views Thread by Frances Del Rio | last post: by
7 posts views Thread by Richard Lawrence | last post: by
12 posts views Thread by Secret Guy | last post: by
2 posts views Thread by Jeff Thies | last post: by
7 posts views Thread by Gnolen | last post: by
1 post views Thread by yb | last post: by
3 posts views Thread by alice | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.