一、描述：在html中连续几个内联标签或表单元素标签的换行在浏览器会被解释为一个3px的空格，示例代码如下:
<style>
.wrap{
margin: 200px;
border: 1px red solid ;
width: 145px;
}
a{
display: inline-block;
width: 70px;
height: 20px;
line-height: 20px;
background: #F66577;
color:#fff;
font-size: 12px;
text-align: center;
border-radius: 3px;
}
a:nth-child(2){
background: #41C77D;
}
</style>
<body>
<div class="wrap">
<a href="">优雅的a1</a>
<a href="">优雅的a2</a>
</div>
</body>效果图如下
二、引起原因：在ff,chrome当中（在IE上会屏蔽掉）会将代码中的换行或空格解析为==空文本节点==，所以也就出现了我们所不期望需要的空格。
三、解决办法
1、写代码的时候不要换行，在一行输写，那么将解决该问题。但是代码维护起来就不怎么方便了，适用于代码量很少的情况。
2、给父元素设置字体大小为0，缺点是需要给子元素另外设置字体大小。
3、设置元素margin-left为-3px;此方法同比取消滚动条时屏幕宽度改变问题。缺点是如果用到js拼接字符串时样式会乱。
综上所述可以根据实际情况采取不同方法解决此问题。
更多推荐
HTML代码换行引起的空格问题
发布评论