文章介绍了如何使用CSS属性来调整元素的垂直对齐方式，包括图片、div和input、button之间的间隙问题。解决方案包括设置父元素字体大小为0，将图片设为块元素，调整vertical-align，以及处理input和button的高度不一致问题，主要涉及box-sizing属性的运用。
这个属性用来设置标签垂直的对齐对式
● baseline 默认值 标签放置在父标签的基线上
● top 把标签的顶端和行中最高的标签的顶端对齐
● middle 把标签放在父标签的中部
● bottom 把标签的底端放在行中最低的标签的低端对
解决两个元素之前的间隙
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<img src="./img/1.webp" alt="">
<div></div>
解决方式
1. 给父元素设置字体为0
body{
font-size: 0;
}
2. 把图片设置为块元素
img{
border: 1px solid red;
display: block;
}
3. 给图片设置垂直对齐方式
img{
border: 1px solid blue;
/* 除了默认值 其他的都可以实现 (top middle bottom) */
vertical-align: bottom;
}
input和button之间的缝隙问题与高度对齐问题
在使用input和button的时候，发现两个元素之间有间隙和高度不匹配的问题
列如
<body>
<input type="text">
<button>按钮</button>
</body>
产生的原因
是由于标签之间的换行产生的空白字符导致的
间隙解决方式
1. 不换行
把input和button写在一行
<body>
<input type="text"><button>按钮</button>
</body>
2. 父元素字体设置为0
body{
font-size: 0;
}
3. 给元素添加浮动属性
input{
float: left;
}
button{
float: left;
}
4. 给button加一个定位属性
button{
position: relative;
left: -5px;
}
5. 给button加一个向左的外边距
button{
margin-left: -5px;
}
高度不一致问题
产生的原因：
box-sizing：content-boxp; 计算时padding和border不会算在高度和宽度中；box-sizing：border-box；计算时padding和border会算在高度和宽度中
在谷歌浏览器中，box-sizing默认的是content-box，在调试工具中查看input没有设置box-sizing，所以是谷歌浏览器的默认值，而button中box-sizing设置的是border-box最终出现了高度问题
解决方法
input,button{
height: 20px;
width: 30px;
box-sizing: border-box;
vertical-align: middle;
}
4900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
