去除行内元素之间的间隙
Posted zgdawdl
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了去除行内元素之间的间隙相关的知识,希望对你有一定的参考价值。
当行内元素(此处主要是指inline-block)在一行显示时,存在默认的行间元素间隙,在布局时可能要去除
第一种方法: font-size(在子元素或者父元素上设置都可以,看需求) //适用inline-block元素
<div class="parent" style="font-size: 0;"> <input type="text"> <input type="text"> </div>
第二种方法:letter-space(在父元素上设置) //适用inline-block元素 //关于-5px,经测试,只有这个数值刚好重合,或许是个巧合,可自行测试
<div class="parent" style="letter-space:-5px;"> <input type="text"> <input type="text"> </div>
第三种方法:word-space(在父元素上设置) //适用inline-block或者inline元素
<div class="parent" style="word-space:-5px;"> <input type="text"> <input type="text"> </div>
第四种方法:float(在子元素上设置) //适用inline-block或者inline元素
<div class="parent"> <input type="text" style="float:left;"> <input type="text" style="float:left;"> </div>
以上是关于去除行内元素之间的间隙的主要内容,如果未能解决你的问题,请参考以下文章
行内元素,display:inline-block元素,元素间间隙问题的解决