<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
bug问题:外层div的border线条底部与图片底部出现有几像素的缝隙,
出现bug的原因:vertical-align: baseline;垂直居中的属性默认是底部对齐,而图片/文字的有顶线、中线、基线、底线四条线构成,基线与底线有之间还有内容,会撑开外层div
<div style="border: 1px solid black;margin-bottom: 20px;">
<img src="banner.jpg" style="width: 223px; height: 100px;">
</div>
解决方式1:vertical-align: top; 垂直居中属性改为其他对齐方式
<div style="border: 1px solid black;margin-bottom: 20px;">
<img src="banner.jpg" style="width: 223px; height: 100px;vertical-align: top;">
</div>
解决方式2:将图片、文字修改为块状元素
<div style="border: 1px solid black;">
<img src="banner.jpg" style="width: 223px; height: 100px;display: block;">
</div>
</body>
</html>
效果图: