为什么li元素的vertical-align属性不会被其内部的a元素继承？

为什么vertical-align属性不会继承 #

CSS属性的默认继承规则是W3C标准预先定义的，不同属性的继承逻辑根据使用场景设计：

• 文本样式类属性（比如font-family、color、font-size等）默认是可继承的，这种设计是为了方便全局统一文本风格，避免给每个子元素重复设置相同的文本规则。
• 布局控制类属性（比如vertical-align、margin、padding、position等）默认是不可继承的，这类属性如果默认继承反而会导致大量不可预期的布局错乱：比如父元素设置vertical-align是为了调整自身和同级元素的对齐关系，一旦继承给子元素，子元素内部的行内内容对齐逻辑就会被打乱，不符合绝大多数开发场景的需求。

你的场景错位的原因 #

你仅给li设置了vertical-align: middle时，这个属性仅作用于li本身（你的li设置为行内元素，这个值是用来对齐li和同级的其他li元素），嵌套在内部的a元素不会继承这个属性，a默认的vertical-align值是baseline，会基于自身基线对齐li的基线，自然就会出现错位。

更简便的优化方案 #

你不需要同时给li和a加vertical-align，可以直接给ul设置line-height: 30px替换原来的height: 30px，行高等于容器高度时，内部的行内元素会自动垂直居中，代码更简洁。

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