[SeaCanary]

Originally Posted by Jellby

<snip>

If you want to be even smarter:

<div class="verse">
<p>...
<p>...
</div>

<div class="verse chorus">
<p>...
<p>...
</div>

Now the "chorus" is a "verse" too, so you don't need to repeat stuff:

.verse {
    margin-bottom: 0.5em;
    }
.verse p {
    margin: 0;
    margin-left: 1em;
    text-indent:-1em;
    }
.chorus p {
    margin-left: 2em;
    }

When I tried this I found that every verse and chorus line had a blank line before and after it. I even built a new file with just this CSS code and some dummy verse and chorus lines and got the same result.

But this worked. (No changes here. I'm just including it for completeness.)

  <div class="verse">
    <p>Oh dear! We're goin' to be late,</p>
    <p>Gaffer is stood at the gate.</p>
    <p>We're out o' pocket,</p>
    <p>Our wages he'll dockit,</p>
    <p>We'll have to buy grub on the slate.</p>
  </div>

  <div class="verse chorus">
    <p>cho: Poverty poverty knock, my loom is-a saying all day,</p>
    <p>Poverty poverty knock, Gaffer's too skinny to pay,</p>
    <p>Poverty poverty knock, always one eye on the clock,</p>
    <p>I know I can guttle when I hear me shuttle go,</p>
    <p>Poverty poverty knock.</p>
  </div>

And here's how I changed the CSS code:

.verse {
    margin-bottom: 0.5em;
    }
.verse p {
    margin:0 0 0 1em;
    text-indent:-1em;
    }
.chorus p {
    margin:0 0 0 2em;
    }

What am I doing wrong?