无法在此内联元素中看到border-top

Question

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

HTML：

<div class="content">test test test</div>

的CSS：

body{
  padding: 0;
  margin: 0;
}
.content {
    display: inline;
    background: palegreen;
    border: 5px solid red;
}

http://jsfiddle.net/Kodam/h1c3r5u3/

Answer 1

让我引用this answer：

  

display：inline 表示该元素以内联方式显示在同一行的当前块内。只有当它在两个块之间时，该元素才会形成一个“匿名块”，但它具有尽可能小的宽度。

但是如果考虑顶部边框，则会使div与同一行上的其他元素垂直错位，即使在您的情况下，线上只有一个元素。然而，顶部边框被忽略，因此它是“＃34;伸出的＆＃34;身体，你看不到它。

作为＆＃34;证明＆＃34;，请尝试在提供的小提琴中修改您的HTML代码：

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

然后你就可以看到顶部边框，因为父元素的高度有足够的空间让它不会突出。

Answer 2

为什么不使用display: inline-block？

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