From the course: CSS for Developers

Unlock this course with a free trial

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

It starts with the CSS box model

It starts with the CSS box model - CSS Tutorial

From the course: CSS for Developers

It starts with the CSS box model

- [Instructor] The CSS box model is the foundation of layout on the web. The box model is the term used to describe the rules surrounding the physical properties of all HTML elements. Basically, you can think about it this way, every single element on your webpage is considered to be in a rectangular box. Images, text, forms, everything. And the properties of each box, it's width, height, border, margin, and padding. These define not only the size of an element, but also how it relates to the elements around it. I've put together a live code example, so if you want to follow along, you can open up the codespace, go to 02_01, and fire that up in the live server. And that's this box-model.html. I'm going to right click anywhere on the page, and click inspect to open up the developer tools. And I'm actually going to dock that on the right side here just to make this a little easier to see, there we go. So here, I can go through the entire DOM tree and access any element on the page. As I…

Contents