极客观点
项目管理
HarmonyOS
两个 p 元素，设置行高 24px，子元素垂直居中对齐。css 如下：
p {
line-height: 24px;
}
p * {
vertical-align: middle;
}第一个 p 里面是简单文本，高度是 24px，第二个里面有一些子元素，高度变得比 24px 大了，找不出原因。
如果去掉 vertical-align: middle; 第二行高度正常，但是复选框和文字就没有对齐了。加上了高度却会变化。
求教是为什么~
不能给 p 元素指定固定的 height，因为可能有换行。
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<body>
<p>11111</p>
<p>
多个行内元素：
<input type="checkbox" id="t1" name="type1">
<span class="beautify_checkbox"></span>
<label for="t1">选项</label>
<input type="checkbox" id="t2" name="type2">
<span class="beautify_checkbox"></span>
<label for="t2">选项</label>
<input type="checkbox" id="t3" name="type3">
<span class="beautify_checkbox"></span>
<label for="t3">选项</label>
</p>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
}
p {
line-height: 24px;
}
p * {
vertical-align: middle;
}
</style>
</body>
</html>
变化的不是行高，而是元素高度，
line-height和子元素的vertical-align共同作用影响元素高度。默认元素的基线与父元素的基线对齐，即vertical-align: baseline;，此时父元素heignt等于line-height。vertical-align属性变化，height自然不会等于line-height。现在p元素的子元素继承了
line-height: 24px;，给其设置一个足够小的值，就可以不影响p元素的高度了。