Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Workshop

Notices

Reply
 
Thread Tools Search this Thread
Old 07-31-2015, 04:41 AM   #1
ButWhy
Junior Member
ButWhy began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Jul 2015
Device: EPUB & MOBI
Question 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.
ButWhy is offline   Reply With Quote
Old 07-31-2015, 06:41 AM   #2
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,750
Karma: 5867233
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.
Jellby is offline   Reply With Quote
Old 07-31-2015, 09:43 AM   #3
Pablo
Guru
Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.
 
Pablo's Avatar
 
Posts: 799
Karma: 3394257
Join Date: Mar 2009
Location: Rosario, Argentina
Device: SONY PRS-505, PRS-T2
Have a look at the "CSS box model":

Pablo is offline   Reply With Quote
Old 07-31-2015, 11:22 AM   #4
ButWhy
Junior Member
ButWhy began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Jul 2015
Device: EPUB & MOBI
Awesome. Thank you both.
ButWhy is offline   Reply With Quote
Old 07-31-2015, 11:49 AM   #5
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 10,090
Karma: 6744922
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
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
DaleDe is offline   Reply With Quote
Old 07-31-2015, 11:54 AM   #6
Section8
Groupie
Section8 ought to be getting tired of karma fortunes by now.Section8 ought to be getting tired of karma fortunes by now.Section8 ought to be getting tired of karma fortunes by now.Section8 ought to be getting tired of karma fortunes by now.Section8 ought to be getting tired of karma fortunes by now.Section8 ought to be getting tired of karma fortunes by now.Section8 ought to be getting tired of karma fortunes by now.Section8 ought to be getting tired of karma fortunes by now.Section8 ought to be getting tired of karma fortunes by now.Section8 ought to be getting tired of karma fortunes by now.Section8 ought to be getting tired of karma fortunes by now.
 
Section8's Avatar
 
Posts: 159
Karma: 1146276
Join Date: Oct 2011
Location: Arlington, TX
Device: Kindle PW2, Nook ST, Nook Color, Sony PRST1
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.
Section8 is offline   Reply With Quote
Old 07-31-2015, 12:55 PM   #7
ButWhy
Junior Member
ButWhy began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Jul 2015
Device: EPUB & MOBI
Quote:
Originally Posted by Section8 View Post
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?
ButWhy is offline   Reply With Quote
Reply

Tags
android, margin, nook, padding, sigil

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 06:18 AM.


MobileRead.com is a privately owned, operated and funded community.