How do I include padding in an element so that the height and width is the same?

Answer 1

On the boxes that you are trying to control the height and width of, add the property box-sizing with the value border-box. Give those boxes the desired width and height you want, and set the padding to what ever you want. What the property box-sizing does is it lets you control how to the height and width of the box is calculated. The property value border-box lets you give the box a set width and height that includes the padding in the calculation. Therefore, the heights and widths of the boxes that you define will not change when the value of the padding is different. On the other hand, the default way would add the padding to the width or height you specify to get the end height or width of the box. Here is a link to a webpage that explains this

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing