边框不顶部内联，边框底部内联

Question

我有一个简单的图像，我想给它上边框和下边框。 这是我的代码：

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

问题在于，边框顶部会截去图像的一部分，而边框底部会截取相反的部分，甚至在显示边框底部之前都会添加白色填充。

我只是希望将边框整齐地添加到边框，而不会切除图像的任何空格或部分。 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;
}

演示。