The CSS box model describes how the size of elements are calculated. Look at how the different CSS properties all work together to form the box model.
- [Professor] The CSS box model describes how the size of elements are calculated. To the browser, every HTML element is a rectangular box. Let's look at our current project. Each heading, paragraph, link, every single HTML element is its own box. Each outline represents how the browser sees each element. The spacing between some of the elements are default styles. CSS can be used to remove or revise B styles. There are five CSS properties used to determine the size and spacing of the elements.
The width and the height are used to set a specific width or height value to the content box. The padding adjusts the space inside of the element. And margin controls the amount of space around the outside of the element. And the border adds a border between the padding and the margin of an element. Each element can have different combinations of one or more of these properties. The way these properties are formulated together to calculate the total size of the element is the box model.
In CSS, there are many options for declaring length of values. We went over a few common values to use with font size and line height in an earlier lesson. These length values can also be used for box model properties. For page layouts, pixels are commonly used. They're fixed units and offer more control, but they're not very flexible. Percentages are used to make the components relative to the size of its containing element. This comes in handy when designing and developing for different screen sizes and responsive web design.
For this course, I'll be sticking with pixels and percentages, which is a great starting point for learning CSS. Let's take a closer look at each one of these box model properties. The width and height properties are used to change the default size of the block and inline elements. Just remember, inline elements require the display property to be able to apply width and height to it. Padding is used to adjust the space inside of the element. It can be used in longhand form or shorthand.
The longhand syntax specifies which side to apply the style to. This comes in handy when you want to target just one side. You can also use shorthand by declaring four values. The values must be separated by a space and always follow a clockwise order starting from the top. The second value is always the right, then bottom, then left. The shorthand syntax can be shortened even further. One value means the padding is the same on all sides.
Two values means the first targets the top and the bottom, and the second targets the right and the left side. For three values, the first is the top, the second is the right and the left, and the third is the bottom value. And four values means top, right, bottom and left. You can also mix different types of length values. If an element already has default padding, setting it to zero will remove it.
Any positive value will add or adjust the default padding. Margin adjusts the space around and outside of the element. The longhand and shorthand syntax rules are the same as padding. The border property displays between the margin and padding of an element. It also has longhand and shorthand syntax for defining the border width, style, and color. Just like padding and margin, you can also target a specific side of the element.
Here's a resource on the Mozilla Developer Network, which shows all the available border styles. Right under the Syntax. There are many options available aside from solid. Let's head over to JSFiddle and try out some box model styles. Sometimes it's hard to distinguish between margin and padding, because they're both used for spacing. So I've added a background color to the elements to be able to easily see if the space is added inside, or outside of the element. So first let's add some padding to both elements.
I'm just going to add 10 pixels of padding. (typing) And run the code... Notice that the background color expanded, since padding adds space inside of the element making the whole element bigger. Use padding when you don't want the content within the element to go right to the edge of the container. Now if I set the margin to zero in paragraph, it's actually going to remove the default space between lines.
And if I use a positive number, it's going to add more space around the element. I'm going to stick with 10 pixels, and add that to the links as well. So there's two things here I want to talk about. Number one, the background color won't expand into the margin area. Because it's adding space to the outside of the element, it doesn't become a part of the element. And notice here that these two links, although we added margin around it, there's still no space between this paragraph and these links.
And that's because while inline elements do take padding and margin values, it will only push the other elements out horizontally, not vertically. The elements stay within the line, unless of course you use the display property. If we add display inline block to the link, we'll be able to apply some of those block properties to it while remaining in a line just like inline-level elements.
Now that I've added display inline block, the margin is displaying horizontally and vertically. Let's just add one more thing. Let's go with a border. I'm going to add two pixels from my width. And solid style, color of black. And let's add that to the link as well. And there's your border added around the elements. Feel free to continue to experiment with the different ways to declare these properties and get comfortable with it before moving on to the next lesson.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property