0

Can someone explain why - in this instance - an input tag would exceed the width of it's parent? If you inspect the element it's got nothing to do with the padding, border or margins...

* {
  box-sizing: border-box;
}

.foo {
  width: 400px;
}

.bar {
  font-size: 40px;
}
<div class="foo">
  <input type="number" class="bar" />
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
user3599231
  • 101
  • 1
  • 2
  • 5
  • 1
    Check out this answer https://stackoverflow.com/questions/11748575/default-input-element-size - it looks like the default input size is 20 characters. If you want to override this, you could override the `size` attribute, or just set `width: 100%;` – chase Apr 05 '22 at 20:41
  • 1
    Interesting, so is this applicable to an input of type number? According to mozilla the attribute is only applicable to email, password, tel, url and text input types. – user3599231 Apr 05 '22 at 21:10
  • 1
    Good catch, I didn't realize that. I guess the default size is still 20 and that's why it's expanding beyond its parent. – chase Apr 05 '22 at 22:43

0 Answers0