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

<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有可能吗?

最佳答案

实际上,它并没有在顶部被切断,它在底部只有一个空格,由内联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.

关于html - 边界顶部不内联,边界底部内联,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24130752/

10-12 12:36
查看更多