From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Unlock this course with a free trial

Join today to access over 24,700 courses taught by industry experts.

Consistent sizing with box-sizing: border-box

Consistent sizing with box-sizing: border-box - CSS Tutorial

From the course: CSS Toolkit: Tips and Techniques for Layout and Styling

Start my 1-month free trial Buy for my team

Consistent sizing with box-sizing: border-box

“

- [Instructor] Let's say that you have an element like this second paragraph here, and you decide you want to add some padding inside to give the content a little breathing room. So I could go in here and say, padding 1.5 rim, and as a result, the box grows. Why is this happening? Well, if you set either the width or the height of a box, which I've done here with this width, then whenever you add padding or a border or both, you're adding to the overall width of the content box. So the entire box grows. And CSS, you have to imagine a box around all elements, and then the padding goes outside of that box. That's because the default box sizing for all HTML elements is set to content box, meaning the box size is applied to the content inside the box. The same thing happens if we apply a border. So I'll say border, one rim solid purple, and our box grows again. If you're working with a specific design and want things to line up just so, this is probably not what you want. So to solve this…

Contents