From the course: Practical CSS for No-Coders

Unlock this course with a free trial

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

Understanding the box model in CSS

Understanding the box model in CSS

From the course: Practical CSS for No-Coders

Start my 1-month free trial Buy for my team

Understanding the box model in CSS

“

- [Instructor] Our little webpage is looking okay, given the basic CSS that we've applied to it. However, one of the major things that is lacking is spacing on this page. We know that we have not quite enough room between the text, and the edges of those color bars. Like especially if you look at the word play, and go outside and play, you can see how the bottom of the P and the Y are actually touching the edge of that color box. If we were looking at this on CodePen, there's a little bit of white space between the edges of those color bars, and the edge of the webpage and that big gap between H plus sport, and what's the best exercise? I'd love to see that go away. There are a lot of things that are going on. To fix these problems, we need to understand the spacing properties. That means it's time to discuss the box model in CSS. Every HTML element is a box. The box consists of several properties that…

Contents