CSS填充问题使用CSS表格进行多行复选框

Question

我正在尝试制作一个把手部分模板，以根据UX设计师提供给我的设计规范创建一个多行复选框。

要创建此元素的部分，我正在使用CSS表。然而，第一个和第二个单元格似乎得到一些未定义的填充。我似乎无法找到这些细胞排列不正确的原因。

HTML

<label style="margin-bottom:12px; display:table; border-style:hidden;">
  <div style="display:table-cell; width:34px">
    <span class="fancy-checkbox-multiline">
      <input type="checkbox" value="box">
      <span class="box">
        <span class="checker">
          <span class="mark"></span>
        </span>
      </span>
    </span>
  </div>
  <div style="display:table-cell; padding:0;">
    <div style="display:table; border-style:hidden;">
      <div style="display:table-row; font-size:12px; line-height:12px">
        Primary Label
      </div>
    </div>
    <div style="display:table;">
      <div style="display:table-cell; font-size:10px; line-height:12px">
        Secondary Label
      </div>
      <div style="display:table-cell; font-size:10px; line-height:12px; padding-left:5px">
        Tertiary Label
      </div>
    </div>
  </div>
  <div style="display:table-cell; line-height:34px; padding-left:20px;">1
  </div>
</label>

我还创建了一个JS小提琴 https://jsfiddle.net/PolishVendetta/3s7kxta4/8/

我可以向下移动复选框以匹配第二个单元格中的文本，但这会在元素顶部添加意外空间，而该元素与其他复选框不匹配。为什么这个填充存在？

Answer 1

有一个空格，因为文字与基线对齐，您可以使用vertical-align

与顶部对齐

＆＃13;

＆＃13;

$font-color-grey-2: #BBBDBF;
$font-color-primary: #525252;
body {
  font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-style: normal;
  color: #222;
  line-height: 1.5;
  background: #fff;
}

@mixin fancy-box-multiline {
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: 10px;
  border: 1px solid $font-color-grey-2;
  position: relative;
  top: 0px;
}

@mixin fancy-check {
  $mark-color: white;
  .checker {
    $uptick-rotation: 33deg;
    border-right: 2px solid $mark-color;
    -webkit-transform: rotate($uptick-rotation);
    -moz-transform: rotate($uptick-rotation);
    -ms-transform: rotate($uptick-rotation);
    -o-transform: rotate($uptick-rotation);
    transform: rotate($uptick-rotation);
    height: 14px;
    width: 9px;
    display: none;
    position: absolute;
    bottom: 4px;
    left: 4px;
    .mark {
      $downtick-rotation: 12deg;
      border-bottom: 2px solid $mark-color;
      width: 7px;
      height: 1px;
      position: absolute;
      bottom: 1px;
      right: -1px;
      -webkit-transform: rotate($downtick-rotation);
      -moz-transform: rotate($downtick-rotation);
      -ms-transform: rotate($downtick-rotation);
      -o-transform: rotate($downtick-rotation);
      transform: rotate($downtick-rotation);
    }
  }
}

.fancy-checkbox-multiline {
  .box {
    @include fancy-box-multiline();
    @include fancy-check();
  }
  input[type=checkbox] {
    display: none;
  }
  input[type=checkbox]:checked + .box {
    background: $font-color-primary;
    border-color: $font-color-primary;
    .checker {
      display: inline-block;
    }
  }
  input[type=checkbox]:disabled + .box {
    opacity: 0.5;
  }
}

＆＃13;

<label style="margin-bottom:12px; display:table; border-style:hidden;">
  <div style="display:table-cell; width:34px">
    <span class="fancy-checkbox-multiline">
    <input type="checkbox" value="box">
    <span class="box">
        <span class="checker">
            <span class="mark"></span>
    </span>
    </span>
    </span>
  </div>
  <div style="display:table-cell; padding:0; vertical-align:top">
    <div style="display:table; border-style:hidden;">
      <div style="display:table-row; font-size:12px; line-height:12px">
        Primary Label
      </div>
    </div>
    <div style="display:table;">
      <div style="display:table-cell; font-size:10px; line-height:12px">
        Secondary Label
      </div>
      <div style="display:table-cell; font-size:10px; line-height:12px; padding-left:5px">
        Tertiary Label
      </div>
    </div>
  </div>
  <div style="display:table-cell; line-height:34px; padding-left:20px;">1
  </div>
</label>

＆＃13;

＆＃13;

＆＃13;