CSS行内块元素间隙及对齐问题

前端学习 评论

行内块元素间隙问题

问题描述

在设置css行内块时，若有多个行内块元素存在，有可能出现块元素之间的间隙，效果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <style>
        div {
            border: 2px solid;
        }
        span {
            display: inline-block;
            height: 200px;
            width: 200px;
        }
        span:first-child {
            background-color: rgb(212, 77, 77);
        }
        span:last-child {
            background-color: rgb(106, 226, 102);
        }
    </style>
    <div>
        <span>行内元素</span>
        <span>行内元素</span>
    </div>
</body>

产生原因

元素被当成行内元素排版的时候，HTML代码中元素之间的空白符（空格、回车换行等）都会被浏览器处理。根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。

这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

解决方法

根据上面的分析，可以得到如下解决方法：

方法一：在父元素中设置font-size:0

既然间隙由字体大小决定，那么直接将大小设为0，间隙自然也就变为0

存在问题： 如果行内块元素中有文字，则该方法会无法显示文字内容。

方法二：在HTML代码中，修改写法，避免行内块元素对应的标签之间的换行

1
2
3
4
5
6
<!-- 方案1：连写为一行 -->
<span>行内元素</span><span>行内元素</span><span>行内元素</span>
<!-- 方案2：避免在两组标签之间换行 -->
<span>
    行内元素</span><span>
    行内元素</span>

存在问题： HTML代码不美观，降低辨识度。

方案三：css中设置浮动

1
2
3
4
5
6
span {
    display: inline-block;
    float: left;
    height: 200px;
    width: 200px;
}

存在问题： 设置浮动后，父盒子会塌缩，下方盒子挤占位置，影响布局。

解决方法： 清除浮动，如为父盒子添加overflow:hidden属性

方案四：设置父元素word-spacing属性为负值

1
2
3
4
div {
    border: 2px solid;
    word-spacing: -5px;
}

存在问题： 可能会影响父元素中的其他元素

解决方法： 为需要该效果的元素们设置单独的div

行内块元素对齐问题

问题描述

当两个行内块元素并列放置，若内部均为空或者都只有一行文字时，对齐效果正常；

当仅其中一个元素中有文字内容或两个元素中文字内容行数不等时，元素对齐会发生错位。

产生原因

同一行的行内元素默认对齐方式是基线对齐，即vertical-align：baseline

对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘；

对于内容不为空的inline-block元素而言，行内块元素的基线是元素的内部最后一行内联元素的基线，而内联元素（如例子中的文字段落）的默认基线是其本身的底部边缘；

当行内块元素内容不同时，两个行内块的基线位置不同，导致对齐效果产生了错位。

解决方法

方法一：为所有行内块元素设置 vertical-align: top/middle/bottom; 属性，改变默认设置

该方法直接规定了行内块元素的对齐标准，当个两个行内块大小相同时，top/middle/bottom的位置一定相同

1
2
3
4
5
6
span {
    display: inline-block;
    vertical-align: top;
    height: 200px;
    width: 200px;
}

方法二：为所有行内块元素添加浮动，并为父元素添加溢出隐藏

设置浮动后，原本的基线对齐失效，两元素顶部均直接对齐父元素顶部。

1
2
3
4
5
6
7
8
9
10
div {
    border: 2px solid;
    overflow: hidden
}
span {
    display: inline-block;
    float: left;
    height: 200px;
    width: 200px;
}

枫与风