为何缩小按钮font-size后父div高度未随之改变？

问题根源：行内块元素的基线对齐机制 #

按钮默认是inline-block（行内块）元素，当它处于普通块级父容器中时，浏览器会遵循文本排版的基线对齐规则：为了容纳y、g这类带有下沉部分的字母，基线下方会预留固定的空白空间。哪怕你把按钮内的字体缩到极小，这个排版自带的留白依然存在，这就是父容器边框和按钮之间出现间隙、父容器高度没随按钮同步收缩的原因——跟按钮的padding、margin完全无关，所以你去掉这些属性根本没用。

为什么加flex能解决问题 #

给父容器设置display: flex后，整个容器进入flex布局上下文，彻底改变了子元素的排版逻辑：

1. 按钮会自动成为flex item，默认的align-items: stretch规则会让按钮填充父容器的高度，同时父容器的高度会完全由按钮的实际高度决定，不再受基线留白的影响。
2. flex布局直接取消了行内元素的基线对齐机制，原来的排版留白自然就消失了，父容器也就跟着按钮的高度收缩了。

其他可选解决办法 #

除了用flex布局，还有两种简单方法能解决这个问题：

• 给按钮设置vertical-align: top/middle/bottom，强制改变它的对齐方式，脱离基线对齐规则。
• 把按钮改成块级元素：display: block，块级元素不会触发基线对齐，父容器高度会自动匹配按钮高度。

内容的提问来源于stack exchange，提问作者rutabega