<分区>
我正在排队<img>使用 div 但似乎 <img> 中有一些边距/填充.
这是我尝试过的:
.Box {
display: inline-block;
}
.myDiv {
background: blue;
width: 100px;
color: white;
}
img {
margin: 0px !important;
padding: 0px !important;
width: 100px;
height: 100px;
background: red;
}<div class="Box">
<div class="myDiv">
Content
</div>
</div>
<div class="Box">
<img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg">
</div>我希望它看起来像这样:
最佳答案
内联元素的默认垂直对齐方式是基线，因此您需要像 bottom 这样的东西，并且还要删除 box div 上的高度(除非您希望它高 100 像素，而您的示例图像没有显示):
vertical-align: bottom;
例子:
.Box {
display: inline-block;
}
.myDiv {
background: blue;
width: 100px;
color: white;
}
img {
margin: 0px !important;
padding: 0px !important;
width: 100px;
height: 100px;
background: red;
vertical-align: bottom;
}<div class="Box">
<div class="myDiv">
Content
</div>
</div>
<div class="Box">
<img src="https://i.ytimg.com/vi/2VLDkNjAUBU/maxresdefault.jpg" />
</div>关于html - 排列 img 和 div css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47777601/