From the course: Making Sense of the CSS Box Model
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
What is the CSS Box Model? - CSS Tutorial
From the course: Making Sense of the CSS Box Model
What is 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…
Contents
-
-
-
-
-
(Locked)
What is the CSS Box Model?4m 50s
-
(Locked)
Changing the contents within the box2m 28s
-
(Locked)
Understanding the display porperty2m 43s
-
(Locked)
Sidebar: Images are inline elements2m 21s
-
(Locked)
Position is everything3m 4s
-
(Locked)
Floating and clearing content2m 40s
-
(Locked)
Using the clearfix2m 28s
-
(Locked)
Pseudo elements: Making the browser hallucinate2m 49s
-
(Locked)
-
-