css中font-size为0的妙用(消除内联元素间的间隔)

Posted shiyou00

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css中font-size为0的妙用(消除内联元素间的间隔)相关的知识,希望对你有一定的参考价值。

前言

<div>
    <input type="text">
    <input type="button" value="提交">
</div>

技术图片

看不片我们不难发现为什么会多出一个间隙出来呢。我们该如何消除呢?

inline && inline-block元素间隙

元素间留白间距出现的原因就是标签段之间的空格

因此去除的方法之一就是把标签的间隙去除掉

<div>
    <input type="text"><input type="button" value="提交">
</div>

技术图片

果然就没有间隙了,但是这样代码的可读性太差了。
解决方法还有一些,例如:margin负值 , letter-spacing, word-spacing,浮动等但是最佳的解决方案还是font-size:0

font-size = 0

<div style="font-size: 0;">
    <input type="text">
    <input type="button" value="提交">
</div>

技术图片

小结

之所以会想着把这个问题记录下来也是,当碰到一些精细的设计图时,距离的调整很重要。

以上是关于css中font-size为0的妙用(消除内联元素间的间隔)的主要内容,如果未能解决你的问题,请参考以下文章

font-size:0; 消除空白间隙

3.4 内联块元素

消除textarea的空格de长度值

内联元素padding与高度可控的分隔线实例页面

CSS技巧-rgba函数的妙用

您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭