邊框不頂部內聯，邊框底部內聯

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

演示。