Size
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.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
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
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.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.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.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.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.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.
Last modified 8mo ago