why does this display ID input have padding at top and bottom?

this is the codepen to the project: https://codepen.io/lirem/pen/PoyEVxY ive tried setting padding on #display to 0 and ive tried setting the input element padding to 0. the top and bottom padding is only reduced when i increase the font-size. so im guessing that the space is for the content to expand but how can i control it? what funcamental principle of css am I missing over here that is preventing me from debugging this?
lirem
CodePen
Calc WIP
...
6 Replies
Mannix
Mannix2y ago
that's not padding you have a fixed height of 80px
Herelore
Herelore2y ago
oh damn! thanks for this, amazing how obvious this is now... i have another question regarding this display box. it is part of a grid, but why does it leave this space at the bottom the display grid even as i keep increasing the height?
Mannix
Mannix2y ago
it's because of the min-height instead of setting min-height give your buttons padding
Herelore
Herelore2y ago
i just tested it out and you're right again. how does min-height in the container cause this behaviour in its children..?
Mannix
Mannix2y ago
browser calculates the rows sizes based on the content. you could use grid-template-rows to set it yourself instead of depending on the browser your content is less then the min-height you have set so you get free space here and there
Herelore
Herelore2y ago
thanks for the help! it took me some time to understand it but it worked. hope i can rmb this the next time encounter a similar problem
Want results from more Discord servers?
Add your server