今天在做东西时发现插入图片后,图片自带下边距,随手记录一下。
我们可以明显看见图片与下边框之间有距离,那么怎么 解决这个问题呢?
首先我们应该分析一下为什么会出现这样的情况:那是因为图片是行内元素,所以我们第一种方式可以将图片变为块级元素。
第一种方式:
<div class="border">
<img src="1.jpg" alt="">
</div>
.border{/*用来给图片加边框的*/
border: 1px solid #000;
display: inline-block;
background: #6ff;
}
img{
display: block;
}
第二种方式(行内元素属性的vertical-align的默认值是baseline,将图片的垂直居中方式改为middle):
<div class="border">
<img src="1.jpg" alt="">
</div>
.border{/*用来给图片加边框的*/
border: 1px solid #000;
display: inline-block;
background: #6ff;
}
img{
vertical-align: middle;
}
第三种方式(将img的父级的字体大小设置为0):
<div class="border">
<img src="1.jpg" alt="">
</div>
.border{/*用来给图片加边框的*/
border: 1px solid #000;
display: inline-block;
background: #6ff;
font-size:0;
}
第四种方式(给img的父级设置高度同图片高度一致):
<div class="border">
<img src="1.jpg" alt="">
</div>
.border{/*用来给图片加边框的*/
border: 1px solid #000;
display: inline-block;
background: #6ff;
height: 150px;/*此处我用的图片为宽高各为150px*/
}
第五种方式(给图片设置左浮动):
<div class="border">
<img src="1.jpg" alt="">
</div>
.border{/*用来给图片加边框的*/
border: 1px solid #000;
display: inline-block;
background: #6ff;
height: 150px;/*此处我用的图片为宽高各为150px*/
}
img{
float: left;
}
这几种方式都可解决图片下边距的问题,至于选择哪种更为合适,自己视情况而定。