input和button之间的缝隙问题与高度对齐问题

最新推荐文章于 2024-01-05 14:15:42 发布

会玩代码的猫

最新推荐文章于 2024-01-05 14:15:42 发布

阅读量620

点赞数 2

文章标签： css html5 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_43465508/article/details/129589581

版权

缝隙问题

可以看到input和button之间有一个间距

缝隙原因

标签之间的换行，产生的空白字符导致的

解决方法

<input type="text"><button>点击</button>

父元素的字体设置为0

body{
font-size:0;
}

input{

float:left;}
button{
float:left;
}

 button{
            margin-left: -2px;
        }

高度问题

input会比button矮一点,因为在计算样式中查看

button里有box-size：border-box,

input没有定义样式box-size

谷歌默认content-box

所以input就会比button矮

box-size属性值

content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

解决方法：

input,button{
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    vertical-align: middle;
}

关注