Padding v margin?

[foosion]

As I understand it, the basic difference between padding and margin is that margin is adding space around an element and padding is adding space within an element.

I don't understand how the difference works for things such as p and h1 with pure text (no borders, decoration, etc.). When I compare, for example, "margin: 1em" to "padding: 1em" in a p or h1 definition, the padding takes up a bit more space. Why is this?

I've looked at a few tutorials, which usually have some variation of what I wrote in the first paragraph and apply padding v margin to things which have borders, in which case the around v. within difference makes more sense.

Why the difference I'm seeing for normal text? As is often the case, I feel I'm missing something simple.

[Turtle91]

margin tends to give space around the container, padding gives space within the container. Mostly noticeable when you are dealing with borders for example. However sometimes margin can be eaten by the renderer.

The box model diagram is the best thing to study for understanding...but it seems you got that. Application is just experience.

[JSWolf]

In some cases, when you use a page break command to split a page, using a margin to have some top stop on the split may not work. Padding will work.

[foosion]

Originally Posted by Turtle91

margin tends to give space around the container, padding gives space within the container. Mostly noticeable when you are dealing with borders for example. However sometimes margin can be eaten by the renderer.

The box model diagram is the best thing to study for understanding...but it seems you got that. Application is just experience.

I believe your first paragraph is essentially what I wrote above. Is that right?

What's the container for a normal text paragraph?

If I'm reading your entire post correctly, including "margin can be eaten by the renderer" the major difference is that the renderer can shrink margins (but either not padding or they don't shrink padding as much) and that's why I'm seeing, for example, a 1em padding as taking more space than a 1em margin, at least in the Calibre editor (which is where I'm looking).

[Turtle91]

That is correct. The box model works for any element in HTML, including the <p>...you may see some used more effectively than the <p>, but it is there...

Here is a tutorial page for anyone else who is interested, but it seems you got the hang of it.

[foosion]

Just to make sure I understand, margin and padding should work the same around normal text (p, h1, etc.), but some ereaders might treat them differently.

For example, in a pure text document if I want a heading which starts a page to be separated a bit from the top of the page and the paragraph which follows it, I'd normally use:

h1 {
  font-size: 1.5em;
  margin: 0.5em 0;
  line-height: 1.2em; /* reduce space between lines if text wraps */
}

I could have used padding instead of margin, but it might have a different appearance depending on the ereader.

I'd guess conversion to kepub and how the reader renders that might also cause differences.

[Jellby]

Margins are combined/collapsed, padding is not. A div with bottom-margin:2em followed by a div with top-margin:1em will have 2em spacing between their contents (the largest margin survives). The same with padding will result in 3em spacing (they're just added). If there are borders, margin goes outside, padding goes inside.

[foosion]

Originally Posted by Jellby

Margins are combined/collapsed, padding is not. A div with bottom-margin:2em followed by a div with top-margin:1em will have 2em spacing between their contents (the largest margin survives). The same with padding will result in 3em spacing (they're just added). If there are borders, margin goes outside, padding goes inside.

That makes sense and could account for the difference if there's a div margin.

In my test case, there's no explicit div. If what I read is correct, the default margin, padding and border for div is 0.

I tried surrounding a chapter with <div> ... </div> (just inside body) and defined div as margin; 0. It didn't make any difference (as it shouldn't, based on the default).

[Jellby]

body, html and @page could all have margins (default or defined) that might be collapsed with other element margins. Depending on the reading application, you can set custom page margins that could be internally implemented as one of those, or something else. For debugging purposes, you could add some thin borders to better see your boxes.

[theducks]

Many devices control Margins (ignore publishers style version)
I use Padding to sneak past that roadblock

[nabsltd]

Originally Posted by foosion

I don't understand how the difference works for things such as p and h1 with pure text (no borders, decoration, etc.). When I compare, for example, "margin: 1em" to "padding: 1em" in a p or h1 definition, the padding takes up a bit more space. Why is this?

This could just be a quirk of that particular renderer. Testing more renderers might help.

Other than the inside/outside part, the biggest difference between margins and padding is that margins collapse and padding does not. An example:

.p1 {
margin-top: 1em;
margin-bottom: 1em;
}

.p2 {
padding-top: 1em;
padding-bottom: 1em;
}

Consecutive paragraphs of class p1 will have 1em of space between them, while consecutive paragraphs of class p2 will have 2em of space. This is because margins collapse to the larger of the two shared margin values.