Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Box Sizing | Box Model and Element Spacing
CSS Fundamentals
course content

Course Content

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
2. Text Styles
3. Box Model and Element Spacing
4. Flexbox
5. Decorative Effects

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, or margin;
  • If we set an element's width and height with box-sizing: content-box, the specified width and height only apply to the content area.

Let's run the following example:

html

index

css

index

js

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 the padding and border in total size;
  • This means that if we set an element's width and height properties with box-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.
html

index

css

index

js

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's box-sizing property to inherit its value from its parent element;
  • This means that the box-sizing behavior of the current element is determined by the box-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.
1. What is the default value for the `box-sizing` property?
2. If a parent element has `box-sizing: border-box` and a child element has `box-sizing: inherit`, what value will the child element use for the `box-sizing` property?

What is the default value for the box-sizing property?

Select the correct answer

If a parent element has box-sizing: border-box and a child element has box-sizing: inherit, what value will the child element use for the box-sizing property?

Select the correct answer

Everything was clear?

Section 3. Chapter 2
We're sorry to hear that something went wrong. What happened?
some-alt