Course Content
CSS Fundamentals
CSS Fundamentals
Box Sizing
The box-sizing
property is used to control how the total size of an element is calculated, specifically concerning its width
and height
. There are three possible values for the box-sizing
property. Let's break down what each of these values means:
content-box
- This is the default value of the
box-sizing
; - When an element is set to
content-box
, its size is calculated based on its content box; - The content box includes only the actual content of the element, excluding any
padding
,border
, ormargin
; - If we set an element's
width
andheight
withbox-sizing: content-box
, the specified width and height only apply to the content area.
Let's run the following example:
index
index
index
We observe that when we specify box-sizing: content-box;
, the width
property is 200px
, and the height
property is 40px
, indicating that the content area will be exactly 200px wide and 40px tall.
border-box
- When an element is set to
border-box
, its size calculation includes thepadding
andborder
in total size; - This means that if we set an element's
width
andheight
properties withbox-sizing: border-box
, the specified width and height values include any padding and border; - In this case, the content area will adjust to accommodate the specified width and height, including the padding and border;
- This is often used to ensure that an element's overall size remains consistent, regardless of the padding and border.
index
index
index
In this example, the element's width
and height
will be 200px
and 60px
, respectively, and these dimensions include the padding and border. So, the content area will be adjusted to fit the remaining space.
inherit
- The
inherit
value allows an element'sbox-sizing
property to inherit its value from its parent element; - This means that the
box-sizing
behavior of the current element is determined by thebox-sizing
property of its parent element; - It can help ensure a consistent
box-sizing
behavior throughout a document by setting it on a parent container.
Everything was clear?