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

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

您还可以为display:block设置img：

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

Demo.