02-15-2011, 07:03 PM | #1 |
Wizard
Posts: 3,720
Karma: 1759970
Join Date: Sep 2010
Device: none
|
margin top, bottom, additive or not ?
I am a little puzzled as to how these margin top, margin bottom values work, when set in CSS
I have experimented with altering definitons for the calibre css that applies to p tags ( in sigil) & then viewing the results in calibre viewer i find that non=zero values generate blank lines as per the table below (values in ems) top = 0, bottom = 0 : no blank lines top = 1, bottom = 0 : 1 blank line top = 0, bottom = 1 : 1 blank line all that makes sense then comes top= 1, bottom= 1 - I expect to see 2 blank lines but I only see 1 ??? continuing top =n>1, bottom = 0: n blank lines OK I've not done top=n, bottom=m (n,m>1) to see if I get n+m blanks, or something different. I would have expected n+m blanks but the 1+1 result has thrown me it is only the 1+1 that is an apparent anomaly what am I not understanding correctly here please ? PS I forgot , in this test, to check what happens when both margin top & margin bottom explicit definitions are both removed - I think from past experience that causes p tags to default to just 1 blank line - above or below - not sure which ? once I get this straight in my mind, I'm thinking of having some global extra css code to hand ( for my default preferences) that lets me easily flip between the various look n feel options currently begin debated & polled elsewhere i.e. indent + no blanks, indent+ blanks, no indent + blanks. the existing calibre options do some of that already, but not all of it. AM I right in thinking that can all be done with calibre overrides rather than having to open book & edit CSS ? if so, than I guess this is headint toward suggesting an enhancement to C. look n feel options - where you tick one of 3 ( or more ) predetermined layout styles ( indent + blanks settings) and the book is converted to that presentation for you. Ultimately it could be a buttom on the e-reader device that enables this. (Kindle already has line spacing, font spacing & words per line user settings ) |
02-15-2011, 08:07 PM | #2 | |
Well trained by Cats
Posts: 29,809
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
They are adjacent ('boxes', in the box model): Bottom: 1em (para#1), top: 1em (para#2) get added for a total of 2em between paras 1 and 2. You play 'stack the blocks' Link to w3schools box model http://www.w3schools.com/css/css_boxmodel.asp |
|
Advert | |
|
02-15-2011, 08:31 PM | #3 |
Enquiring Mind
Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
|
The "stack the blocks" concept works for the different sections of a "block" - margin, border, padding. However in CSS2, the default behaviour is for the vertical margins of "blocks" that adjoin each other (e.g. two paragraphs, one after the other) to "collapse" together, resulting in a shared margin which is equal in size to whichever individual margin is larger, rather than adding the two margins together.
So if the top paragraph has "margin-bottom:2em" and the bottom paragraph has "margin-top:1em", the result would be a 2em space between the paragraphs, not a 3em space. (For a detailed description of this behaviour, in all its glory and with all the technicalese and minutiae and exceptions see http://www.w3.org/TR/CSS21/box.html#collapsing-margins). |
02-16-2011, 02:13 AM | #4 | |
Wizard
Posts: 3,720
Karma: 1759970
Join Date: Sep 2010
Device: none
|
Quote:
so , from your explanation, e.g. top = 2 em bottom = 3em leads to a total margin of 3em, not 5em - but is that positioned above the text or below ? ( i tried reading your link but it was too early in th morning to face off of that detail :-) |
|
02-16-2011, 06:13 AM | #5 |
Enquiring Mind
Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
|
Heh! I really don't blame you for putting off wading through the technical spec - it's the kind of thing you only want to tackle if you really really have to.
I've attached a JPG showing a diagram of how the margin-collapse property works, which might make it a bit clearer. The image is in three sections. The first section shows the margins set up in the CSS stylesheet for H1, H2 and P. The second section shows how these margins interact when these elements are next to each other in the HTML code, using the default setting for margin-collapse (which is to have adjoining vertical margins collapse together). The third section, simply for illustration, shows how the margins would interact if you were to set the margin-collapse property to "none" - the margins interact cumulatively rather than collapsing together. (However I haven't a clue if e-readers pay any attention to the margin-collapse property if it's set to "none" CSS stylesheet - this is simply illustrating how things would work if they did). "I wonder why some sources have top & bottom both set to 1em then...?" With "margin-collapse" functioning on its default setting, your top and bottom margin settings can be considered "minimum desired" values. So if you always want a blank line before or after a standard paragraph of text, you could set both margin-top and margin-bottom to 1em (or whatever value you are using for the default separation between paragraphs), knowing that it won't result in a double size space between paragraphs - the margin at the bottom of one paragraph will collapse into the margin at the top of the following paragraph, leaving just the desired single line of space between them. Edit to add: At least, that's how it will work if the device or application interpreting the CSS is doing it properly! (end of edit) Hope that all made some sort of sense! Last edited by DMSmillie; 02-16-2011 at 06:15 AM. |
Advert | |
|
02-16-2011, 12:33 PM | #6 |
Enquiring Mind
Posts: 562
Karma: 42350
Join Date: Aug 2010
Location: London, UK
Device: Kindle 3 (WiFi)
|
Just an additional comment on what I wrote above about CSS margins and the "margin-collapse" default.
In ebook terms, this will only apply to EPUB based ebooks. Because the MOBI format doesn't actually use CSS internally, but instead, for vertical margins, uses a proprietary "height" attribute which sets a top margin, you do need to think about how the margins will interact between one element and the next. The overall result from the conversion from CSS to "MOBI HTML" could result in margins being added to each other, with over-large gaps between text elements as a result. So if you intend to convert your HTML or EPUB to MOBI format, you need to think a bit more about how you set your margins, so that you don't end up with bigger gaps between some elements than you intended. For example, Kindlegen will translate the following HTML: Code:
<p style="margin-top: 12px; margin-bottom: 12px">Paragraph text here.</p> <p style="margin-top: 12px; margin-bottom: 12px">Paragraph text here.</p> Code:
<p height="12">Paragraph text here.</p> <div height="12"></div> <p height="12">Paragraph text here.</p> <div height="12"></div> |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
@page { margin-bottom: 5.000000pt; margin-top: 5.000000pt; } | cybmole | Conversion | 15 | 02-12-2011 11:57 AM |
anyway to change Kindle top/bottom margin? | cdpango | Kindle Developer's Corner | 2 | 11-28-2010 08:20 PM |
little issue converting from odt to epub (top and bottom margin) | superanima | Calibre | 1 | 02-15-2010 04:15 PM |
Can't get rid of bottom margin in epubs | ShellShock | Sony Reader | 3 | 02-11-2010 04:15 PM |
calibre ignore margin-top and margin-bottom | bender | Calibre | 2 | 12-11-2009 06:58 AM |