Quote:
Originally Posted by dwig
All of the advice so far about margins should be taken to refer to page/screen level tags (e.g. <body>, ...), other that the good advise to not use the shorthand notation.
Margins applied to Heading tags (e.g. <h1>, ...) and containers such as <div> and <p> are another matter. With these, margin-top and margin-bottom are excellent way to insert vertical space, if you use em units, though added space is best (IMO) left to special cases with <p> and <div> tags (eg. <p class="section" where the section class has a margin-top of perhaps 1em). |
If by <p class="section"> you are referring to a section break, that's not correct. A 1em space is not enough.
<p class="sectionbreak">Some text for the first paragraph after the section break</p>
.sectionbreak {
padding-top: 2em;
text-indent: 0
}
That's what works best for a screen be it eInk, a phone, or tablet. By using padding-top, you don't lose the section break space when it occurs at the bottom of the page.