我有一个需要在右下角添加标签的图像。
当我在那儿撒粉时,它在图片下方4px,没有填充或边距。
.postImage {
position: relative;
display: inline-block;
}
.post img.thumbnail {
width:100%;
height: 100%;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}
<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>
修复它的最佳方法是什么?我不认为
bottom: 4px;
是正确的。
谢谢
最佳答案
默认情况下,图像标签在底部占用一些额外的空间,因为它是嵌入式元素。将其更改为block
元素以删除多余的空间
.thumbnail {
display: block; /*inline-block, float:left etc..*/
}
.postImage {
position: relative;
display: inline-block;
}
.post img.thumbnail {
width:100%;
height: 100%;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}
.thumbnail {
display: block;
}
<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>