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?
6 Replies
that's not padding you have a fixed height of 80px
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?
it's because of the min-height
instead of setting min-height give your buttons padding
i just tested it out and you're right again. how does min-height in the container cause this behaviour in its children..?
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
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