这里的设置vertical-align:top;的原理是什么呢？

来源：4-1 头部header区--html

qq_勿忘初心_H

2020-03-21 15:31:12

	<div style="width:200px; border:1px solid #eee">
		<img src="img/1.png">
	</div>

img{
	/*img和div之间可以存在一点间隙，需要去掉，因为img默认是inline-block*/
	vertical-align:top;
	width: 100%;
	border: none;
}

写回答

1回答

樱桃小胖子

2020-03-21

同学你好，这是因为在css中有条线，被称作基线，行内元素默认的垂直对齐方式vertical-align的默认值是以baseline对齐(即基线对齐)，也是以x字母的下方为基准，如下图：

备注：这里即便是没有"xyp"图片也会是跟x的下边对齐显示，这里只是为了看的更清楚

那么，使用vertical-align:top;修改img行内元素的垂直居中方式，让它不在以基线对齐，就可以解决间隙的问题了。

如果我的回答帮助了你，希望采纳，祝学习愉快！

0 学习 · 6815 问题

相似问题

回答 1

回答 2

回答 2

回答 2

回答 2