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

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

以下是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>

带有

.border的屏幕截图

显示：内联

：

带有

.border

显示的屏幕截图：内联块

：

我希望它看起来大致像这样（通过手动线条高度、填充和相对定位的混合实现……啊！）：

---

基本上，

inline块

元素做的每件事都是正确的，但是它们不会像

inline

元素那样在行之间分开。但是

inline

元素会折叠其高度，必须手动调整。真的没有办法解决这个问题吗？

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

---

对我来说，这是一个逃避的答案，但它是有效的™, 至少出于我的目的，所以我一直在使用它，直到更好的东西出现

如果您愿意犯下相对较轻的罪行，即在每个内部

div

的内容周围放置

span

，并设置

span

的文本样式，而不是

div

，则可以将每个

div

设置为

内联块

，将背景和边框样式指定给每个

div

而不是父

div

，将每个

div

的左/右

边距设置为0，并通过
填充扩展
div
的边框，使其看起来像一个连续的背景矩形。如果需要大纲，可以使用第n项
选择器并相应地设置边框

下面是修改后的HTML（也压缩到一行，以消除
内联块
元素之间的空格）：

下面是它的样子：


如果你想要比有边框的背景色更复杂的东西，这种技术就会失效。但就我的目的而言，它的好处——简单得多的CSS和大部分是自动布局——大于缺点。
对，手动行高（加上其他一些东西）是我文章中最后一幅图像的实现方式。不过，我想知道是否有一种方法可以不用手动调整就可以做到这一点。制作内部divs inline block并添加一个margin-bottom如何。让内部divs成为
inline block
实际上不会影响其父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;
}

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

.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;
}