MobileRead Forums - View Single Post - Managing Blank Lines Following <p> Using CSS

Jellby · 01-29-2014, 02:12 PM

I'd rather:

Code:

<div class="poetry">
 <div class="stanza">
  <div class="line">Now Boney's away from his warring and fighting,</div>
  <div class="line">He has gone to a place, where there is naught can delight him,</div>
  <div class="line">He may sit there &amp; dwell, on the glories he has seen oh,</div>
  <div class="line">While forlorn he will mourn, on the Isle of Saint Helena.</div>
 </div>

 <div class="stanza">
  <div class="line">No more in Saint Cloud, will he appear in great splendour,</div>
  <div class="line">Nor come forth from the crowd, like the great Alexander,</div>
 </div>
</div>

Using containers lets you use more selectors, and it's easier to control the spacing between verses and normal text, for instance. Using <div> instead of <p> for the individual lines is a matter of taste, because the lines are not actually paragraphs; it also degrades more gracefully if CSS is not completely/correctly supported, and does not force you to override margins/indents from normal paragraphs.

For the margin/negative indent of the verses, I'd use a larger value, to make it more evident when verses are broken, and avoid confusion with other poetry indent.

As for the actual separation between stanzas, I use margin-top:0.5em in div.stanza.

01-29-2014, 02:12 PM	#4
Jellby frumious Bandersnatch Posts: 7,551 Karma: 19500001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	I'd rather: Code: <div class="poetry"> <div class="stanza"> <div class="line">Now Boney's away from his warring and fighting,</div> <div class="line">He has gone to a place, where there is naught can delight him,</div> <div class="line">He may sit there & dwell, on the glories he has seen oh,</div> <div class="line">While forlorn he will mourn, on the Isle of Saint Helena.</div> </div> <div class="stanza"> <div class="line">No more in Saint Cloud, will he appear in great splendour,</div> <div class="line">Nor come forth from the crowd, like the great Alexander,</div> </div> </div> Using containers lets you use more selectors, and it's easier to control the spacing between verses and normal text, for instance. Using <div> instead of <p> for the individual lines is a matter of taste, because the lines are not actually paragraphs; it also degrades more gracefully if CSS is not completely/correctly supported, and does not force you to override margins/indents from normal paragraphs. For the margin/negative indent of the verses, I'd use a larger value, to make it more evident when verses are broken, and avoid confusion with other poetry indent. As for the actual separation between stanzas, I use margin-top:0.5em in div.stanza.