明凯博客

关注网站技术,一个特立独行的程序员

span之间的空隙的原因和解决办法

span之间的空隙,到底是什么?display:inline-block的元素虽然能够处于同一行,但是很变态的是它们之间出现了空格,如何处理?

(例如在浮动元素居中当中,我们必须使用display:inline-block)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
    <meta charset="UTF-8"/>
    <title>内敛元素的间隙-独行冰海</title>
    <style>
        *{margin: 0;padding: 0;}
        .con{
            width: 300px;
            height: 24px;
            margin: 10px auto;
            border: 1px solid #f00;
            font-size: 14px;
            line-height: 24px;
        }
        span{
            border-right: 1px solid #00f;
        }
    </style>
</head>
<body>
    <div class="con">
        <span>独行冰海</span>
        <span>内联元素</span>
        <span>小空隙</span>
    </div>
</body>
</html>

代码预览

左侧有明显的空隙
span1
原因:

内联元素在html中换行的同时会产生一个文本节点,可以使用负值的margin-right或者letter-spacing + word-spacing来解决这个问题,或者使用float,不考虑chrome可使用font-size基本解决。

代码预览

浮动之后:

span2

inline-block用于块对象的横向排列(如图片组),其有着一些float不可替代的作用(如不错位、可垂直居中等),但在实际应用中,还是存在一个很纠结的弊端,有缝。

解决方法:

1. 缝隙的宽度与文字大小相关,缝隙就如同一个文本节点,字越大,缝隙也就越大。

2. 这个文本节点是由于换行产生的,故,如果span和span之间或li与li之间不存在换行,那就没必要这么罗嗦了。

3. 示例中采用了font-family:’微软雅黑’(也可以是simsun-宋体),这是因为在等宽字体的情况下,各浏览器对这个文本节点的宽度就很一致了:0.5em

,

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注