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

2017年9月12日 MK CSS 0 阅读 3478次

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

（例如在浮动元素居中当中，我们必须使用display:inline-block）



    
    内敛元素的间隙-独行冰海
    


    
        独行冰海
        内联元素
        小空隙

代码预览

<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基本解决。

代码预览

<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;
            float:left;
        }
    </style>
</head>
<body>
    <div class="con">
        <span>独行冰海</span>
        <span>内联元素</span>
        <span>小空隙</span>
    </div>
</body>
</html>

浮动之后：

span2

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

解决方法：

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

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

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

span, 空隙

一	二	三	四	五	六	日
			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	28	29	30	31

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

代码预览

代码预览

相关文章

发表回复取消回复

近期文章

最近读者

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

代码预览

代码预览

相关文章

发表回复 取消回复

近期文章

最近读者

发表回复取消回复