关于设置inline-block 后的 vertical-align 问题
来源：2-3 首页-头部样式（2）
学习plus
2021-01-05 15:01:51
问题描述：
如图所示，图中图1的location-icon原是块状元素，但设置为inline-block后如图2所示，会发生偏移。这是什么原因？
相关截图：
相关代码：
<div class="header">
<div class="search-bar">
<div class="bar-location">
<div class="location-icon"></div>
<div class="location-text">郑州市</div>
</div>
<div class="search-btn">
<p class="place-holder">鸡翅</p>
</div>
</div>
尝试过的解决方式：
设置vertical-align 为top时和图1一致，但说不出原因
写回答
1回答
-
同学你好，问题解答如下：
默认情况下，在垂直方向，行内块元素（inline-block）的基线会与所在行的基线对齐。所以设置location-icon为inline-block后，它的位置会下移：
而设置vertical-align:top;的含义就是让元素在所在行居顶对齐，所以设置该属性，图标会居顶显示：
行内块元素垂直方向的对齐会受很多因素影响，同学简单了解上述内容，会用vertical-align调整元素垂直方向的位置即可。
祝学习愉快！
0
相似问题