0

Hope you're all doing fine. I have a question regarding borders in CSS.

I have a button that is 48px height, but padding sets its size dynamically instead of hardcoding the 48px height value. When I give it a 2px border, the button ends up being 52px because of the extra 2px on top and bottom.

Is there a way to include border in the total height? Like border included in layout? There is a specific reason that I don't wanna lower padding with 4px in total. Maybe stack the border on top of the padding? Is this possible?

Further reading: https://forum.figma.com/t/borders-are-not-included-in-the-size-of-frames/2372

botana_dev
  • 418
  • 4
  • 16
  • Does this answer your question? [Placing border inside of div and not on its edge](https://stackoverflow.com/questions/9601357/placing-border-inside-of-div-and-not-on-its-edge). You want to have a look at [box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing). – Amaury Hanser Sep 19 '22 at 06:58
  • @AmauryHanser Hi fella, unfortunately it doesnt. I already have a box-sizing in every element, because of the normalize technique I am using. I – botana_dev Sep 19 '22 at 07:07

0 Answers0