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

如下代码

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即可。

posted @ 2019-12-14 14:57  anch  阅读(746)  评论(0编辑  收藏  举报