CSS: Margin vs. Padding

ButWhy · 07-31-2015, 04:41 AM

Forgive me if I'm posting this question in the wrong place. Will some helpful mod please move me if necessary?

Here's my issue. I just ran into a situation where the EPUB I'm building (in Sigil 0.8.6) rendered perfectly in ADE, Nook for PC, and Aldiko (with publisher settings selected). I validated the EPUB itself with flightcrew and idpf. I mushed the CSS through the w3s validator. All was good.

...and then came Nook for Android. None of the CSS that involved the margin property would stick, so the spacing (margin-top or margin-bottom) did not render. After googling for a geological age to find out why, I finally ended up changing all my "margin-bottom:1em;" to "padding-bottom:1em;".

The good news: The spacing works in the Nook for Android app, ADE and all the rest. (Also successfully converted to MOBI courtesy of KindleGen.)

But of course now I'm wondering what sort of minefield I've just built for myself, so I have come crying to you guys in the hopes that

a) Someone can explain why Nook-for-Android app can't play nice with the other children when it comes to the margin property

b) What I need to watch out for when using the padding property instead of margin. What's the difference between the two, really?

I sincerely appreciate any insight on this. Man, this stuff is confusing sometimes.

Jellby · 07-31-2015, 06:41 AM

Padding goes inside the border, margin goes outside. If you have no border, you won't see it.

Depending on how the sizes are computed, margin can be included or not in width and height, I think padding is always included.

Margin "collapses" between elements, padding doesn't. If you an element with "margin-bottom: 1em" followed by another with "margit-top: 2em", the separation between them will be 2em (if both have the same font size). If you use paddings, the separation will be 3em.

Pablo · 07-31-2015, 09:43 AM

Have a look at the "CSS box model":

ButWhy · 07-31-2015, 11:22 AM

Awesome. Thank you both.

DaleDe · 07-31-2015, 11:49 AM

It is likely that the Nook is simply overriding your margin settings. Many readers do that to provide the user the option to control margins but they may have a setting to use the publisher's CSS. Most eBooks do not use padding so it is unlikely that any eBook reader will attempt to override that setting.

Dale

Section8 · 07-31-2015, 11:54 AM

I don't know about the Nook android app, but Nook devices have an old bug and ignore the short-hand CSS "margin" rule ("margin: a b c d;" and friends) based on the "publisher formatting" option (I don't remember which way experiences the bug).

The work around is to convert all "margin" css rules to the equivalent margin-top, margin-right, etc. rules. Somewhere in the calibre conversion settings there is an "expand css" option (or something like that) that does this in the css during conversion. When I was reading on a NST, I had some saved regexes in Sigil that did this.

ButWhy · 07-31-2015, 12:55 PM

Quote:

Originally Posted by Section8

I don't know about the Nook android app, but Nook devices have an old bug and ignore the short-hand CSS "margin" rule ("margin: a b c d;" and friends) based on the "publisher formatting" option (I don't remember which way experiences the bug).

The work around is to convert all "margin" css rules to the equivalent margin-top, margin-right, etc. rules. Somewhere in the calibre conversion settings there is an "expand css" option (or something like that) that does this in the css during conversion. When I was reading on a NST, I had some saved regexes in Sigil that did this.

The shorthand might have contributed to the problem. I did (and still do) have declarations for p that include "margin: 0;" with classes for styling things like the first paragraph of each chapter along with some stylized epigraph stuff. In those p-class declarations, I did not use shorthand. I specified only margin-bottom or margin-top on those; never both.

It made no difference whether I flipped the Nook-for-Android publisher formatting slider or not; no space rendered using margin-bottom or margin-top.

I did, however, try mucking around with this in a bunch of different ways. I removed the p declaration entirely. Just for shiggles, I tried changing <p>'s to <div>'s. No change—the spaces would not render at all until I changed margin to padding.

In the back of my mind I have this fear that the change I made will break this book for some other device/app, or for EPUB3.

Why do we love this stuff, again?

07-31-2015, 04:41 AM	#1
ButWhy Junior Member Posts: 4 Karma: 10 Join Date: Jul 2015 Device: EPUB & MOBI	CSS: Margin vs. Padding Forgive me if I'm posting this question in the wrong place. Will some helpful mod please move me if necessary? Here's my issue. I just ran into a situation where the EPUB I'm building (in Sigil 0.8.6) rendered perfectly in ADE, Nook for PC, and Aldiko (with publisher settings selected). I validated the EPUB itself with flightcrew and idpf. I mushed the CSS through the w3s validator. All was good. ...and then came Nook for Android. None of the CSS that involved the margin property would stick, so the spacing (margin-top or margin-bottom) did not render. After googling for a geological age to find out why, I finally ended up changing all my "margin-bottom:1em;" to "padding-bottom:1em;". The good news: The spacing works in the Nook for Android app, ADE and all the rest. (Also successfully converted to MOBI courtesy of KindleGen.) But of course now I'm wondering what sort of minefield I've just built for myself, so I have come crying to you guys in the hopes that a) Someone can explain why Nook-for-Android app can't play nice with the other children when it comes to the margin property b) What I need to watch out for when using the padding property instead of margin. What's the difference between the two, really? I sincerely appreciate any insight on this. Man, this stuff is confusing sometimes.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS: margin-top and margin	Leonatus	ePub	16	06-16-2014 04:29 AM
Bug converting html css text-indent and left-margin	bhoyt	Conversion	15	01-24-2014 07:28 PM
CSS margin instead of margin-top, etc.	icallaci	Conversion	24	10-19-2013 09:52 AM
Margin/word flow issues when converting from RAR(CSS?) to epub...	camobmus	Conversion	0	06-20-2013 04:20 PM
Creator CSS margin attribute misbehaves	EaglePt	Kindle Formats	4	10-03-2010 06:44 AM

07-31-2015, 06:41 AM	#2
Jellby frumious Bandersnatch Posts: 7,542 Karma: 19001583 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Padding goes inside the border, margin goes outside. If you have no border, you won't see it. Depending on how the sizes are computed, margin can be included or not in width and height, I think padding is always included. Margin "collapses" between elements, padding doesn't. If you an element with "margin-bottom: 1em" followed by another with "margit-top: 2em", the separation between them will be 2em (if both have the same font size). If you use paddings, the separation will be 3em.

07-31-2015, 09:43 AM	#3
Pablo Guru Posts: 972 Karma: 4999999 Join Date: Mar 2009 Location: Rosario, Argentina Device: SONY PRS-T2, Kindle Paperwhite 11th gen	Have a look at the "CSS box model":

07-31-2015, 11:22 AM	#4
ButWhy Junior Member Posts: 4 Karma: 10 Join Date: Jul 2015 Device: EPUB & MOBI	Awesome. Thank you both.

07-31-2015, 11:49 AM	#5
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	It is likely that the Nook is simply overriding your margin settings. Many readers do that to provide the user the option to control margins but they may have a setting to use the publisher's CSS. Most eBooks do not use padding so it is unlikely that any eBook reader will attempt to override that setting. Dale

07-31-2015, 11:54 AM	#6
Section8 Addict Posts: 260 Karma: 2092424 Join Date: Oct 2011 Location: Arlington, TX Device: Kindle PW4, Moon+ Reader on a cheap Android tablet	I don't know about the Nook android app, but Nook devices have an old bug and ignore the short-hand CSS "margin" rule ("margin: a b c d;" and friends) based on the "publisher formatting" option (I don't remember which way experiences the bug). The work around is to convert all "margin" css rules to the equivalent margin-top, margin-right, etc. rules. Somewhere in the calibre conversion settings there is an "expand css" option (or something like that) that does this in the css during conversion. When I was reading on a NST, I had some saved regexes in Sigil that did this.

Advert

Advert