SOURCE

console 命令行工具 X clear

                    
>
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;
    /* 方案 1 */
    font-size: 14px;
    /* 方案 2 */
    /* vertical-align: bottom; */
    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;
}