1

If a select tag respects the 100% defined in the CSS, then why can't an input? When inspecting it at the Box Model in Firefox, I see a padding of 1 and a lateral border of 5.33333!

screenshot showing border > 5

Why doesn't that border appear around the input? And why is it defined so large as default? What for? I noticed that applying a CSS box-sizing:border-box; solves the issue, but where is all this specified? I see nothing on MDN.

div {
  background-color:green;
  width:300px;
  height:200px;
}
#txt {
  width:100%;
}
#sel {
  width:100%;
}
<div>
  <p>&nbsp;</p>
  <input type='text' id='txt' />
  <p>&nbsp;</p>
  <select id='sel'>
  </select>
</div>
Rodrigo
  • 4,706
  • 6
  • 51
  • 94
  • it's the default style add to the input (adding duplicate for it too) – Temani Afif Aug 07 '19 at 21:56
  • added more duplicate – Temani Afif Aug 07 '19 at 22:06
  • @TemaniAfif Thanks, but I just couldn't find where 5.33333 is coming from. I looked in forms.css and in html.css (resource://gre-resources/). – Rodrigo Aug 07 '19 at 22:34
  • you will have headaches trying to find this, you simply need to know that each browser add a default style that you can see on inspecting the element. You should never rely on default styles that's why in most of sites you see a reset.css to remove those default one – Temani Afif Aug 07 '19 at 22:40
  • @TemaniAfif I see. I would just like to understand why 5.33333 for something that obviously is occupying ~ 1 pixel. Because *maybe* understanding how this people think could make CSS more intuitive... – Rodrigo Aug 07 '19 at 22:51
  • can you add a screenshot of where you see the 5.333 .. on my side I only see 2px padding and 1px border – Temani Afif Aug 07 '19 at 22:55
  • @TemaniAfif Edited the question to add the picture. I'm using Firefox Quantum 68.0.1 (64-bit, with 150% zoom) on Debian 9. – Rodrigo Aug 07 '19 at 23:33

0 Answers0