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

缝隙问题

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

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

代码在自动格式化时,往往会自动设置一些缩进、换行,而但当元素的display为inline或者inline-block的时候,这些缩进、换行就会产生空白,导致前端页面展示变形。
同行的input和button之间水平对齐和缝隙问题

水平对齐问题

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

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

上一篇:css中vertical-aling与line-height


下一篇:虚拟轴