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.