Putting an outline around multiple inline elements across line break? - html

Question

I want to put a colorful outline around a bunch of inline elements. Is there any easy way to make this look right within the flow of the text?
Here's the HTML:
<span>Text Before</span>
<div class="border">
<div>This</div>
<div>is</div>
<div>not</div>
<div>a</div>
<div>public</div>
<div>service</div>
<div>announcement.</div>
</div>
<span>Text After</span>
Here's the CSS:
.border {
display: inline;
background-color: pink;
word-spacing: 10px;
padding: 2px 0 2px 0;
border: solid;
}
.border > div {
display: inline;
font-size: 30px;
background-color: lavender;
}
Screenshot with .border display: inline:
Screenshot with .border display: inline-block:
I want it to look roughly like this (accomplished with a mixture of manual line height, padding, and relative positioning... ugh!):
Basically, inline-block elements do everything right, but they don't break apart between lines as would inline elements. But inline elements collapse their height and have to be manually adjusted. Is there really no way around this?

Answer 1

Try adding a line-height on container div.
.border {
display: inline;
background-color: pink;
word-spacing: 10px;
padding: 2px 0 2px 0;
border: solid;
font-size: 30px;
}
.border > div {
display: inline-block;
margin-bottom: 15px;
background-color: lavender;
}

Answer 2

This is a cop-out answer on my part, but It Works™, at least for my purposes, so I'm using it until something better comes up.
If you're willing to commit the relatively minor crime of putting a span around the content of each inner div and setting the text style for the span instead of the div, you can make each of the divs an inline-block, give the background and border style to each individual div instead of the parent div, set the left/right margin of each div, to 0, and extend the borders of the divs via padding to make it seem like one continuous background rect. If you want an outline, you can use the nth-item selectors and set the borders accordingly.
Here's the revised HTML (also compressed onto one line, to get rid of the spaces between inline-block elements):
<span>Text Before</span>
<div class="border">
<div><span>This</span></div><div><span>is</span></div><div><span>not</span></div><div><span>a</span></div><div><span>public</span></div><div><span>service</span></div><div><span>announcement.</span></div>
</div>
<span>Text After</span>
And here's the revised CSS:
.border {
display: inline;
word-spacing: 0;
}
.border > div {
display: inline-block;
vertical-align: middle;
background-color: pink;
padding: 5px;
margin: 2px 0 2px 0;
border-top-style: solid;
border-bottom-style: solid;
}
.border > div:nth-child(1) {
border-left-style: solid;
}
.border > div:last-child {
border-right-style: solid;
}
.border > div > span {
background-color: lavender;
font-size: 30px;
vertical-align: middle;
}
And here's what it looks like:
This technique breaks down if you want something more complex than a background color with a border, but for my purposes, the benefits — those being far simpler CSS and mostly automatic layout — outweigh the cons.