行内块元素间隙问题
问题描述
在设置css行内块时,若有多个行内块元素存在,有可能出现块元素之间的间隙,效果如下:
1 | <body> |
![](1_行内块并列间隙.png)
产生原因
元素被当成行内元素排版的时候,HTML代码中元素之间的空白符(空格、回车换行等)都会被浏览器处理。根据white-space的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,所以元素之间就出现了空隙。
这些元素之间的间距会随着字体的大小而变化,当行内元素font-size:16px时,间距为8px。
解决方法
根据上面的分析,可以得到如下解决方法:
方法一:在父元素中设置font-size:0
既然间隙由字体大小决定,那么直接将大小设为0,间隙自然也就变为0
存在问题: 如果行内块元素中有文字,则该方法会无法显示文字内容。
方法二:在HTML代码中,修改写法,避免行内块元素对应的标签之间的换行
1 | <!-- 方案1:连写为一行 --> |
存在问题: HTML代码不美观,降低辨识度。
方案三:css中设置浮动
1 | span { |
存在问题: 设置浮动后,父盒子会塌缩,下方盒子挤占位置,影响布局。
解决方法: 清除浮动,如为父盒子添加overflow:hidden
属性
方案四:设置父元素word-spacing属性为负值
1 | div { |
存在问题: 可能会影响父元素中的其他元素
解决方法: 为需要该效果的元素们设置单独的div
行内块元素对齐问题
问题描述
当两个行内块元素并列放置,若内部均为空或者都只有一行文字时,对齐效果正常;
当仅其中一个元素中有文字内容或两个元素中文字内容行数不等时,元素对齐会发生错位。
![](2_对齐错位问题.png)
产生原因
同一行的行内元素默认对齐方式是基线对齐,即vertical-align:baseline
对于内容为空的inline-block元素而言,该元素的基线就是它的margin底边缘;
对于内容不为空的inline-block元素而言,行内块元素的基线是元素的内部最后一行内联元素的基线,而内联元素(如例子中的文字段落)的默认基线是其本身的底部边缘;
当行内块元素内容不同时,两个行内块的基线位置不同,导致对齐效果产生了错位。
![](3_baseline.png)
解决方法
方法一:为所有行内块元素设置 vertical-align: top/middle/bottom; 属性,改变默认设置
该方法直接规定了行内块元素的对齐标准,当个两个行内块大小相同时,top/middle/bottom的位置一定相同
1 | span { |
方法二:为所有行内块元素添加浮动,并为父元素添加溢出隐藏
设置浮动后,原本的基线对齐失效,两元素顶部均直接对齐父元素顶部。
1 | div { |