html空节点（3px空隙问题）

发表于

换行与空隙

html换行被解析为空格。也是常说的3像素空隙的问题，根据测试不同浏览器产生的空隙大小会不一样。

Chrome，Firefox，IE8+都存在这样的问题，浏览器把换行或空格解析成了“空白节点”，就是javascript中nodeType等于3的节点，IE6,7是忽略这个节点的。 

1
2
3
4
span {
    border: 1px solid red;
    padding: .5em 1em;
}
1
2
3
<span>1</span>
<span>2</span>
<span>3</span>


处理方法

1、不换行

1
<span>1</span><span>2</span><span>3</span>


2、设置margin-left为负值

1
2
3
4
5
span {
    border: 1px solid red;
    padding: .5em 1em;
    margin-left: -3px;
}


3、设置父元素字体大小为0

1
2
3
4
5
6
7
8
9
div {
    font-size: 0px;
}

span {
    border: 1px solid red;
    padding: .5em 1em;
    font-size: 12px;
}
1
2
3
4
5
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>