travelboy travelboy -4 years ago 80
CSS Question

What causes <div> to be taller than its children?

What causes the div

.btn-group
to be taller than all its child elements?

See JSFiddle for applied CSS and visual demonstration.

<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 Source

It's the vertical align on your inline-block elements. If you set them to vertical-align: top it will get rid of the space at the bottom. 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?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download