If you’ve used definition lists (
<dl>) you’re aware of the problem. By default,
display:block. In order to turn them into what we want in most cases (each pair of term and definition on one line) we usually employ a number of different techniques:
- Using a different
<dl>for each pair: Style dictating markup, which is bad
- Floats: Not flexible
display: run-in;on the
<dt>: Browser support is bad (No Firefox support)
- Adding a
<dd>and setting both term and definition as
display:inline: Invalid markup. Need I say more?
If only adding
<br>s was valid… Or, even better, what if we could insert
<br>s from CSS? Actually, we can!