From the course: CSS Essential Training

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Box-sizing and the box model fix

Box-sizing and the box model fix

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Box-sizing and the box model fix

“

- [Instructor] Using different box model properties affects the overall size of the element. The box sizing property is used to determine how an element's total width and height are calculated. There are two values, content box, which is the default value, and border box. When box sizing is set to content box, the width and height values are applied to the content box only. Adding padding and border increases the elements total size because their dimensions are added on top of the width and height values. Margin adds space around the element, so it doesn't increase the size of the element. With the border box value, the width and height is still applied to the content box. However, when padding and border styles are added, the content box shrinks to maintain the original size that was set with the width and height properties. But just like content box, margin is not included in the sizing of the element itself, it just…

Contents