同行的input和button之间水平对齐和缝隙问题

本文主要是介绍同行的input和button之间水平对齐和缝隙问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

缝隙问题

在这里插入图片描述

缝隙问题直接在父元素的css属性上加上 font-size: 0

代码在自动格式化时,往往会自动设置一些缩进、换行，而但当元素的display为inline或者inline-block的时候，这些缩进、换行就会产生空白，导致前端页面展示变形。

项目中input和button对不齐，是因为input和button都是vertical-align: baseline 而二者基于的基线位置不同。
但是，我的demo中并未出现此问题。在input和butten上同时设置css属性vertical-align:top解决

在这里插入图片描述

这篇关于同行的input和button之间水平对齐和缝隙问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！