This page tries to list issues with current web browsers when applying or resetting basic styles of button elements (and input elements with button or submit type).

1. Resetting browser styles

Span (inline-block)

button, input {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  line-height: normal;
}

2. Using line-height

Expected result: buttons should be 50px high.

Span (inline-block)

button, input {
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
  line-height: 50px;
}

3. Using line-height + padding

Expected result: buttons should be 70px high.

Span (inline-block)

button, input {
  margin: 0;
  padding: 10px;
  border: none;
  font: inherit;
  line-height: 50px;
}

4. Using height

Expected result: buttons should be 50px high.

Span (inline-block)

button, input {
  height: 50px;
  margin: 0;
  padding: 0;
  border: none;
  font: inherit;
}

5. Using height + padding + border

Expected result: buttons should be 50px high.

Span (inline-block)

button, input {
  height: 50px;
  margin: 0;
  padding: 10px;
  border: solid 5px black;
  font: inherit;
}

6. Using height + … + box-sizing

Expected result: buttons should be 80px high.

Span (inline-block)

button, input {
  height: 50px;
  margin: 0;
  padding: 10px;
  border: solid 5px black;
  font: inherit;
  box-sizing: content-box;
}