html - 在换行符周围放置多个内联元素的轮廓？

Question

我想在一堆内联元素周围放置一个彩色轮廓。有什么简单的方法可以使它在文本流中看起来正确吗？

这是 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>

这是 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;
}

带有 .border 的屏幕截图 display: inline:

带有 .border 的屏幕截图 display: inline-block:

我希望它看起来大致像这样(通过手动行高、填充和相对定位的混合来完成...呃!):

基本上，inline-block 元素可以正确执行所有操作，但它们不会像 inline 元素那样在行之间分开。但是 inline 元素会折叠它们的高度并且必须手动调整。真的没有办法解决这个问题吗？

Answer 1

尝试在容器 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;
}