消除input与父元素指明出现的空隙

标签：原因分析   span   text   代码   pre   边框   input   size   设置   

如下代码

1 <div>
2     <input type="text" />
3 </div>

如果给div和input分别添加不同的背景色，会发现input上方会出现一段空隙，即便二者的内外边距以及边框和轮廓都设置为0，依然存在。

调试过程：

　　将input的字体大小调大，会发现间隙消失了，input的字体不需要那么大。怎么办？

解决办法：

　　将div的字体大小调小，间隙同样消失了。

原因分析：

　　在容器中有元素是，容器的font-size会其作用，input前面的text节点会导致空格出现，而空格会在input元素较小时依托div的font-size来撑起div，从而导致间隙出现。

　　同理，如果要消除input前面的间隙，将div的font-size设置为0即可。

消除input与父元素指明出现的空隙

标签：原因分析   span   text   代码   pre   边框   input   size   设置   

原文地址：https://www.cnblogs.com/anch/p/12039561.html