Html <；按钮>；在将填充、边距、边框设置为0后有多余的边距

下面的示例显示了一个

元素，其父元素的高度不是按钮的高度。在保留语义和保持

内联的同时，去除多余高度的最佳方法是什么

如果我将按钮设置为

display:block

，则多余的高度将被删除。如果我将父项的字体大小设置为0，则它也会被删除。如果我将

更改为

元素，那么它也是固定的。我是不是应该不讲语义

我已经在谷歌Chrome的稳定版本下对此进行了测试

.box{
高度：30px；
宽度：30px；
背景颜色：绿色；
}
.外部{
背景颜色：蓝色；
}
钮扣{
边界：0；
保证金：0；
填充：0；
}

是一个

内联替换的

元素，因此您只需在CSS中设置

行高

属性

.box{
高度：30px；
宽度：30px；
背景颜色：绿色；
}
.外部{
背景颜色：蓝色；
线高：0；
}
钮扣{
边界：0；
保证金：0；
填充：0；
}

---

发生此问题，因为不会呈现空文本，基线会留有边距。
您只需将文本添加到按钮中，即可更正渲染内容。
另外，硬编码的

垂直对齐

也应该可以

.box{
高度：30px；
宽度：30px；
背景颜色：绿色；
}
.修理{
垂直对齐：次对齐；
}
.外部{
背景颜色：蓝色；
}
钮扣{
边界：0；
保证金：0；
填充：0；
}

首次发行

添加文本
+

通过垂直对齐进行固定

这与将字体大小设置为0相同，是吗？这是不是比仅仅使用一个？以语义的名义与CSS打交道感觉很奇怪。不，它不等于把字体大小设置为0，因为你的按钮的文本会很难读，LOL。我不知道你为什么要用这个，但是如果这就是最后的样子，我肯定会考虑使用<代码>块级别元素。我可以重置元素上的字体大小。将字体大小设置为0是内联元素之间填充的常见解决方法。我主要反对您的解决方案，因为修复程序应用于父元素，而不是“罪魁祸首”。我觉得a的样式可能更好。。但它是一个被点击的按钮，所以我试图用我的HTML尽可能地清晰。我明白了。将

font-size

设置为零将应用于父元素而不是“罪魁祸首”，不是吗？为什么要停止

font-size

<代码>行高：0只需剪下底部，标题仍然可读。垂直对齐修复是一个很好的解决方案，因为它不依赖父包装。：）