html - border-top 不内联，border-bottom 内联

Question

我有一个简单的图像，我想给它一个 border-top 和 border bottom。这是我的代码:

<div class="details-big">
    <img src="../images/full/full21.jpg" alt="title" />
</div>

CSS:

.details-big {
    border-top: 8px solid #f0f0f0;
    border-bottom: 8px solid #f0f0f0;
}

问题是 border-top 截掉了一部分图像，而 border-bottom 恰恰相反，甚至在 border-bottom 显示之前就添加了白色填充。

我只想将边框整齐地添加到边框上，而没有任何空格或图像的某些部分被切断。这可以用 CSS 实现吗？

Answer 1

实际上它并没有在顶部被截断，它只是在底部有一个空间，由内联img渲染。如果你的 div 只包含图像，你可以为你的 div 设置 font-size:0。您也可以为 img 设置边框:

.details-big {
  border-top: 8px solid #f0f0f0;
  border-bottom: 8px solid #f0f0f0;    
  font-size:0;
}

你也可以为你的img设置display:block:

.details-big > img {
  display:block;
}

Demo.