经过测试发现,这个下边距跟inline-block的垂直对齐方式有关,也就是vertical-align; inline-block的默认对齐方式是vertical-block:baseline,由上面可知,就是inline-block元素要根据父元素的基线对齐,那么问题来了,基线又是什么鬼? inline-block的基线是正常流中最后一个line box的基线,除非,这个line box里面既没有line ...
图片后面(前面)有个类似空格字符的节点,然后就能响应line-height形成高度,此时,图片再来个vertical-align:middle,就可以和这个被行高撑高的「幽灵空白节点」(近似)垂直对齐了。 不过上面的效果并不是完全的垂直居中,因为middle中线位置(字符x的中心)并不是字符内容的绝对居中位置 div { line-height: 240px; font-s...
(这还是因为浮动元素脱离文档流的关系)。 3、垂直对齐(Vertical alignment):inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线,但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。 4、空白(Whitespace):inline-block包含html空白节点。如果你的html中一系...
这是前两段代码的示意图,对比两张图发现span没有宽高的情况下,baseline上下分别有隐形高度;设置宽高之后,下面的strut仍然存在,再来看第三段代码的示意图 图中蓝色区域为行内框的高度,红线即字母x的baseline,strut的高度正好是红线到底边框的高度,也就是说默认垂直对齐方式是baseline;扫了一眼MDN关于vertical-align的...
➢ 场景：解决行内块元素垂直对齐问题（浏览器遇到行内块标签默认当文字处理）➢ 问题：当图片和文字...
垂直对齐(Vertical alignment):inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线,但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。 空白(Whitespace):inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了,当你...
两个行内级盒元素默认的垂直对齐方式是vertical-align: baseline，即在基线方向上对齐。行内默认水平是从...
2.预备知识(垂直对齐设置vertical-align) 这个属性在前端领域出现得比较早,一开始以为是和text-align属性相反的设置,text-align是设置文本水平对齐方案,那么vertical-align肯定就是设置文本垂直对齐的方案啦,emm,其实也差不多,那么我们来分析一下这个属性:
3、垂直对齐(Vertical alignment):inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线,但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。 4、空白(Whitespace):inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了,当你对这些元...
垂直对齐(Vertical alignment):inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线,但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。 空白(Whitespace):inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了,当你对这些元素设置inl...