Thank you. I came up with a solution using both <div> and <p>.
Code:
<div class="verse">
<p>There lived a lady in Scotland,</p>
<div class="ILC">Hey my love and ho my joy</div>
<p>There lived a lady in Scotland,</p>
<div class="ILC">Who dearly loved me</div>
<p>There lived a lady in Scotland,</p>
<p>An she's fa'n in love wi an Englishman,</p>
<div class="ILC">And bonnie Susie Cleland is to be burnt in Dundee</div>
</div>
<div class="verse">
<p>The father unto the daughter came,</p>
<div class="ILC">Hey my love and ho my joy</div>
<p>The father unto the daughter came,</p>
<div class="ILC">Who dearly loved me</div>
With the following CSS code.
Code:
.verse {
margin-bottom: 0.5em;
}
.ILC {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 2em;
text-indent: -1em;
font-style: italic;
}
.verse p {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 1em;
text-indent: -1em;
}
Which generates this:
Code:
There lived a lady in Scotland,
Hey my love and ho my joy
There lived a lady in Scotland,
Who dearly loved me
There lived a lady in Scotland,
An she's fa'n in love wi an Englishman,
And bonnie Susie Cleland is to be burnt in Dundee
The father unto the daughter came,
Hey my love and ho my joy
The father unto the daughter came,
Who dearly loved me