# Size ## Box sizing The box-sizing property determines how the size of an element is calculated. It specifies whether the width and height of an element should include padding and borders, or just the content itself. By default, the box-sizing property is set to `content-box`, which means that the width and height of an element only include the content and do not include any padding or borders. Alternatively, if set to `border-box`, the width and height values of an element include padding and border. This can be useful for creating consistent element sizes, especially in complex layouts. ## Width The `width` property specifies the width of an element. It can be set in pixels(px), percentages(%), or other length units. By default, the width of an element is automatically set by the content it contains. Valid Example: * 100% * 60% * 32px * 100vh ## Height The `height` property specifies the height of an element. It can be set in pixels(px), percentages(%), or other length units. By default, the height of an element is automatically set by the content it contains. * 100% * 60% * 32px * 100vh ## Min Width The `min-width` property sets a minimum width for an element. This means that if the content of the element requires a width greater than the specified minimum, the element will expand to the required size. ## Max Width The `max-width` property sets a maximum width for an element. This means that if the content of the element requires a width greater than the specified maximum, it will be clipped and not visible. ## Min Height The `min-height` property sets a minimum height for an element. This means that if the content of the element requires a height greater than the specified minimum, the element will expand to the required size. ## Max Height The `max-height` property sets a maximum height for an element. This means that if the content of the element requires a height greater than the specified maximum, it will be clipped and not visible. ## Overflow X The `overflow-x` property specifies what to do with content that overflows an element's width. The values it can take are `visible`, `hidden`, `scroll`, and `auto`. The `visible` value will display the overflow content, the `hidden` value will hide the content, the `scroll` value will display a scrollbar when necessary, and the `auto` value will display the scrollbar only when necessary. ## Overflow Y The `overflow-y` property specifies what to do with content that overflows an element's height. The values it can take are `visible`, `hidden`, `scroll`, and `auto`. The `visible` value will display the overflow content, the `hidden` value will hide the content, the `scroll` value will display a scrollbar when necessary, and the `auto` value will display the scrollbar only when necessary.\ \ \