Paragraphs and Margins and Padding

HTML & CSS
1

Is it true that a Margin and Padding are really the same thing (i.e. have same effect) when it comes to Paragraphs??

Debbie

2

Not that I have heard, do you have a source stating this?

3

I’m pretty sure I’ve seen it in some books.

And I believe that…


p{
	padding: 2em;
}

and this…


p{
	margin: 2em;
}

yield the same results?!

Debbie

4

To the naked eye, yes, add border: 1px solid #000; to those and you will see the difference. (:

5

To add to what rguy84 said:

Margins create space on the outside of the box

Paddings create space on the inside of the box

See Box Properties for more details…

6

That’s a good idea.

Okay, but you usually don’t add borders to a <p>, right?

So, from a spacing perspective - which is where I’m coming from - is there a correct way to do things?

If I want space between my paragraphs or, say, between a paragraph and a header, would it be better to use a Margin or Padding?

(This is related to my other post about “collisions” in some ways… Because if I consistently chose one convention, then I wouldn’t have had an issue with parent padding because when I spaced out my summary paragraph, I would have overridden the padding in the parent <p> if you follow me?!)

Debbie

7

I add various color borders while I am making a layout, it helps troubleshoot.

I wouldn’t say using padding or margins are better, however you do need to know what they do to be able to use them appropriately. The box model link that Rayzur posted should help that.

when I spaced out my summary paragraph, I would have overridden the padding in the parent <p> if you follow me?!

Sort of, but I think adjusting the p based on the class/id it is in vs the p as a whole would save some heartache.

8

Umm… I totally understand that.

But with a paragraph, Margins and Padding really are interchangeable since everything is on the outside of the text.

(Margins and Padding are totally different on say a DIV depending on where you want space.)

I even believe my SitePoint said this, so I’m asking if one is desirable over the other. (I certainly see people on here use them interchangeably!)

Debbie

9

[quote=“rguy84,post:7,topic:79730”]

Sort of, but I think adjusting the p based on the class/id it is in vs the p as a whole would save some heartache.[/QUOTE]

You’re not following me.

Everyone that helped me create my code here used Margins/Padding interchangeably on <P>.

Had others consistently used one or the other to create spacing, when I set Margin in my specific class…


.summary p {
		overflow: hidden;															margin: 0 0 1em 0;	/* Set spacing between Paragraphs. */
		padding: 0; /* NEW */
}

it would have overridden the parent Margin settings and I wouldn’t have to remember to override the Padding in the parent instead since that is how the spacing was achieved at a global level.

Follow me now?

From what I have read, using either Padding or Margins to space out Paragraphs is acceptable. I just wonder if people prefer on over the other?

Debbie

10

If you think of a <p>aaaaa</p> as a box, and put a border around this element, padding the <p> will make space between the text aaaa and the border.

If you add a margin-top to the <p> element you will push the whole of the element down, away from the element above it in the document.

Margins work on the outside of the box and, in my opinion are the correct way to create a space between the element and surrounding elements.

Padding works inside the box and can move the text away from the borders of the box, but, in my opinion, is unsuitable for moving the box away from its surroundings.

11

From what I have read, using either Padding or Margins to space out Paragraphs is acceptable. I just wonder if people prefer on over the other?
You can use either one to create space but there will be times when paddings will not do the job. If you set BG colors then there is no distinction between the blocks when using padding only, they just run together as one solid BG. Margins are the only way to truly separate the space in that case.

I tend to use margins because I want to take advantage of Collapsing Margins and use them in my favor. Paddings do not collapse but some people use them for that reason. Collapsing margins can be difficult for beginners to come to terms with hence the reason they resort to using paddings (as I did in the beginning) but I soon realized that it was not always efficient. Once you know how to handle margins and know when and how to un-collapse them when needed then you generally only use padding for it’s intended purpose. I don’t code for anything under IE6 so I am not concerned about the IE5 box model. I use paddings on my main containers when I want all children spaced in on the sides. From there I’m usually just setting vertical margins.

All pages are different so it just depends on the task at hand. As a general rule though, paddings are not a substitute for margins as they serve different purposes.

12

Rayzur,

You never cease to amaze me!

That was the nice, thorough response I was looking for to my OP.

Okay, sounds good to me! :slight_smile:

Thanks as always!

Debbie