Additional space under checkbox element

Asked Jul 25 '18 at 10:03

Active Jul 25 '18 at 10:06

Viewed 159 times

Why is there additional space below checkbox? It is not identified in DevTools but expands its container on about 3-4 pixels. I've tested it in Firefox and Edge browsers, it seems that checkbox has inconsistencies in its visualization (Firefox doesn't change the size of it despite the height: 50px; width: 50px; I use Chrome 67 (on Windows 10). The problem seems the same in Edge. Here is JSFiddle: extra space below checkbox

* {
  box-sizing: border-box;
}

.container {
  border: solid 1px;
  padding: 0;
}

input {
  height: 60px;
  width: 60px;
  margin: 0;
}

<div class="container">
  <input type="checkbox" />
</div>

edited Jul 25 '18 at 10:05

m4n0

29,823
27
76
89

asked Jul 25 '18 at 10:03

Vladyslav Tymoshchyk

For creating a custom checkbox, use something like this https://codepen.io/Vestride/pen/dABHx – Nandita Sharma Jul 25 '18 at 10:06
The space issue is related to what @Paulie_D mentioned – Nandita Sharma Jul 25 '18 at 10:07
Ok, thank you very much – Vladyslav Tymoshchyk Jul 25 '18 at 10:10

Additional space under checkbox element

0 Answers0