Box-sizing Limitation

Demonstration that box-sizing without an explicit height does not solve consistency issues.

by _sir

HTML

<h1>
Button Height Comparisons
</h1>
<h2>
Computed Height
</h2>
<div>
  <button class="example1">Example</button>
  <input type="text" class="size1">
  <input type="text" class="width1">
  <p>
  Button with border, no explicit height
  </p>
</div>
<div>
  <button class="example2">Example</button>
  <input type="text" class="size2">
  <input type="text" class="width2">
  <p>
  Button without border, no explicit height
  </p>
</div>
<h2>
Explicit Height
</h2>
<div>
  <button class="example3">Example</button>
  <input type="text" class="size3">
  <input type="text" class="width3">
  <p>
  Button with border, explicit height
  </p>
</div>
<div>
  <button class="example4">Example</button>
  <input type="text" class="size4">
  <input type="text" class="width4">
  <p>
  Button without border, explicit height
  </p>
</div>
<h2>
 Computed with Transparent Border
</h2>
<div>
  <button class="example5">Example</button>
  <input type="text" class="size5">
  <input type="text" class="width5">
  <p>
  Button with transparent border, no explicit height
  </p>
</div>
<div>
  <button class="example6">Example</button>
  <input type="text" class="size6">
  <input type="text" class="width6">
  <p>
  Button with transparent without border, explicit height
  </p>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}
h1, h2 {
  font-family: Cabin, Futura, sans-serif;
}
div {
  margin: 1em;
  background: #ccc;
  overflow: auto;
}

input {
  width: 4em;
}

button {
  font-size: 16px;
  line-height: 1.5em;
  padding: 8px 16px;
  background: white;
  border: none;
  margin: 1em; 
  border-radius: 20px;
}

p {
  margin: 1em;
}

.example1,
.example3 {
  border: 1px solid gray;
}

.example2,
.example4,
.example5,
.example6 {
  background: navy;
  color: white;
}

.example3,
.example4,
.example6 {
  height: 40px;
}

.example5,
.example6 {
  border: 1px solid transparent;
}

JavaScript

[...document.querySelectorAll('button')].forEach((el, index) => {
  document.querySelector(`.size${index+1}`).value = el.offsetHeight;
  document.querySelector(`.width${index+1}`).value = el.offsetWidth;
});