console
<p>issue 链接:https://github.com/ElemeFE/element/issues/14719</p>
<p>正常情况下,希望 form-item 的高度为 40px</p>
<p>但是现在的高度却是 45</p>
<p>解决方式有两个</p>
<ul>
<li>1. 去掉 el-checkbox 的 font-size</li>
<li>2. 在 el-checkbox 上添加 vertical-align: bottom</li>
</ul>
<div class="el-form-item__content">
<div class="el-checkbox-group">
<label class="el-checkbox">
<span class="el-checkbox__input">
<span class="el-checkbox__inner">
</span>
<input type="checkbox" class="el-checkbox__original" />
</span>
<span class="el-checkbox__label">
Option
</span>
</label>
<label class="el-checkbox">
<span class="el-checkbox__input">
<span class="el-checkbox__inner">
</span>
<input type="checkbox" class="el-checkbox__original" />
</span>
<span class="el-checkbox__label">
Option2
</span>
</label>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.el-checkbox-group {
font-size: 0;
}
.el-checkbox {
color: #606266;
font-weight: 500;
user-select: none;
font-size: 14px;
margin-right: 30px;
}
.el-form-item__content {
background-color: #999;
line-height: 40px;
position: relative;
font-size: 14px;
}
.el-checkbox__input {
outline: 0;
line-height: 1;
vertical-align: middle;
}
.el-checkbox__label {
display: inline-block;
padding-left: 10px;
line-height: 20px;
font-size: 14px;
}