我有一个简单的图像,我想给它上边框和下边框。这是我的代码:
<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/