Join Morten Rand-Hendriksen for an in-depth discussion in this video What is the CSS Box Model?, part of Making Sense of the CSS Box Model.
- [Instructor] With the typographical terminology … and principles in place, it's time to take a look … at what's known as the CSS Box Moxel, the main subject … of this course. … As I explained earlier, when we add content … to a document wrapped inside tags, the browser draws … a box around that content. … Each tag or element is represented as a rectangular box. … We can then change the contents and appearance … of the content of the box as well as the different … properties of the box itself using CSS or rather … we can provide the browser with instructions … on how to render the box once it's encountered. … The CSS Box Model is the premise … on which these instructions are based. … In short, using the CSS Box Model, we can tell … the browser exactly how we want a particular box … and its contents to be displayed. … To see how this works, we'll look at one paragraph … of type in isolation. … In CSS, each of the rectangular boxes that wrap … the contents of an HTML element is described …
- Designing with boxes
- The origin of the box in typography
- What is the CSS box model?
- Changing the contents within the box
- Floating and clearing content
- Using the clearfix
- Working with Float, Flex, and Grid
- CSS shapes