<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直对齐方式</title><style>div{border: 1px solid #000;}img{/* vertical-align: middle; *//* vertical-align: top; *//* vertical-align: bottom; */display: block;/* 由于浏览器把行内快，行内标签当做文字处理，默认为他们添加基线对齐 *//* 那么显示出来就是图片的下端留有空白，转块级不会按基线对齐，空白就消失了 */}</style>
</head>
<body><div><img src="./day08/images/1.webp" alt=""><!-- 我是谁？我在哪？ --></div>
</body>
</html>
