1、问题描述
图片和文字在一个盒子中显示时，图片和文字不会在底部对齐(图片大小190*150)
2、分析
图片的对齐方式是按照基线对齐的，而文字确实按照底部对齐
解决图片下间隙方法
1.设置元素在垂直方向上对齐
<head>
<style>
img {
vertical-align: bottom;
}
</style>
</head>
<body>
<div>
abcdefg
<img src="./1.jpg" alt="">
</div>
</body>
2.将图片由行内块元素变成块元素
<head>
<style>
img {
display: block;
}
</style>
</head>
<body>
<div>
abcdefg
<img src="./1.jpg" alt="">
</div>
</body>
3.设置字体大小为0px
<head>
<style>
div {
font-size: 0px;
}
</style>
</head>
<body>
<div>
abcdefg
<img src="./1.jpg" alt="">
</div>
</body>
4.设置图片的浮动属性
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<div>
abcdefg
<img src="./1.jpg" alt="">
</div>
</body>
原文地址：https://www.cnblogs.com/houfee/p/9266127.html
时间： 2024-10-16 10:14:09