css - 是什么导致 <div> 比它的子元素高？

Question

是什么导致 div .btn-group 比它的所有子元素都高？

参见JSFiddle用于应用 CSS 和视觉演示。

<div class="top-box p-sm">
  <div role="toolbar" class="btn-toolbar">
    <div class="btn-group red">
      <button type="button" class="btn btn-default">Save</button>
      <div class="tooltip-button-helper" aria-describedby="ttRename">
        <button type="button" class="btn btn-default"
          style="pointer-events: none;">Rename</button>
      </div>
    </div>
  </div>
</div>

.btn-group {
  background-color: red;
}

.tooltip-button-helper {
  display: inline-block;
  cursor: not-allowed;
}

// fix styling of buttons in ButtonGroups and ButtonToolbars which got broken by inserting another div
.btn-toolbar>.tooltip-button-helper>.btn {
  margin-left: 5px;
}

.btn-group>.tooltip-button-helper:first-child:not(:last-child)>.btn:not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group>.tooltip-button-helper:last-child:not(:first-child)>.btn,
.btn-group>.tooltip-button-helper:not(:first-child)>.dropdown-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group .btn+.tooltip-button-helper>.btn,
.btn-group .tooltip-button-helper>.btn+.btn-group,
.btn-group .tooltip-button-helper>.btn-group+.btn,
.btn-group .tooltip-button-helper>.btn-group+.btn-group {
  margin-left: -1px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="top-box p-sm">
  <div role="toolbar" class="btn-toolbar">
    <div class="btn-group">
      <button type="button" class="btn btn-default">Save</button>
      <div class="tooltip-button-helper" aria-describedby="ttRename">
        <button type="button" class="btn btn-default" style="pointer-events: none;">Rename</button>
      </div>
    </div>
  </div>
</div>
What causes the div .btn-group (with the dark red background) to be taller than its child elements?

Answer 1

它是 inline-block 元素的垂直对齐。如果将它们设置为 vertical-align: top 它将消除底部的空间。 https://jsfiddle.net/jdn58g40/3/

.btn-group {
  background-color: red;
}

.tooltip-button-helper {
  display: inline-block;
  cursor: not-allowed;
}

// fix styling of buttons in ButtonGroups and ButtonToolbars which got broken by inserting another div
.btn-toolbar>.tooltip-button-helper>.btn {
  margin-left: 5px;
}

.btn-group>.tooltip-button-helper:first-child:not(:last-child)>.btn:not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group>.tooltip-button-helper:last-child:not(:first-child)>.btn,
.btn-group>.tooltip-button-helper:not(:first-child)>.dropdown-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group .btn+.tooltip-button-helper>.btn,
.btn-group .tooltip-button-helper>.btn+.btn-group,
.btn-group .tooltip-button-helper>.btn-group+.btn,
.btn-group .tooltip-button-helper>.btn-group+.btn-group {
  margin-left: -1px;
}

button, .tooltip-button-helper {
  vertical-align: top !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="top-box p-sm">
  <div role="toolbar" class="btn-toolbar">
    <div class="btn-group">
      <button type="button" class="btn btn-default">Save</button>
      <div class="tooltip-button-helper" aria-describedby="ttRename">
        <button type="button" class="btn btn-default" style="pointer-events: none;">Rename</button>
      </div>
    </div>
  </div>
</div>
What causes the div .btn-group (with the dark red background) to be taller than its child elements?