Css Can'；在这个内联元素中看不到边框顶部

如果删除边框或将显示更改为块或内联块，则内联元素将完美显示。我不明白为什么我看不见边界

html:

---

为什么不使用

显示：内联块

.content {
    display: inline-block;
    background: palegreen;
    border: 5px solid red;
}

让我引述：

display:inline表示元素在当前块内的同一行内联显示。只有当它位于两个块之间时，元素才会形成一个“匿名块”，但其宽度可能最小

但是，如果将上边框考虑在内，则会使您的

div

与同一行上的其他元素垂直对齐，即使在您的情况下，该行上只有一个元素。但是，顶部边框被忽略，因此它“伸出”身体，您无法看到它

作为“证明”，尝试在提供的FIDLE中修改HTML代码，如下所示：

<div style="line-height: 50px"><div class="content">test test test</div></div>

测试

---

然后您将能够看到上边框，因为父元素的高度有足够的空间使其不会突出。

问题是？可能重复@BenM谢谢分享链接。我想补充一点，未替换的

内联
元素的计算
宽度
/
高度
是
自动
，这意味着计算的高度相对于行框本身的高度，可以通过
行高
@Doc Kodam修改，刚刚查看了您的个人资料，想说收到您的问题的有效答案而根本不接受这些答案是不礼貌的。@MichalHosala Sry。我不知道我能做到。
.content {
    display: inline-block;
    background: palegreen;
    border: 5px solid red;
}

<div style="line-height: 50px"><div class="content">test test test</div></div>