The CSS Box Model4:05 with Guil Hernandez
The box model is what describes the amount of space each element takes up on the page. Let's dig a little deeper into this concept by going over the main components that make up the CSS Box Model.
[MUSIC] 0:00 The box model is the basis of CSS layout because it 0:04 dictates how elements are displayed and how they interact with each other. 0:07 Think of each element on the page as a rectangular box. 0:13 Each box has certain dimensions and takes up a certain amount of space. 0:17 Now, the space the box takes up depends on its content, and 0:21 the padding borders and margins that may surround the content. 0:25 So the box model is what describes the amount of space each 0:30 element takes up on the page. 0:33 So, let's dig a little deeper into this concept by going over the main 0:34 components that make up the CSS box model. 0:38 The very basis of designing with CSS is understanding the box model concept. 0:42 So, as I mentioned earlier, 0:47 we'll need to begin thinking of every HTML element on the page as a box. 0:48 And as you can see here, if we apply a red border to every element on our page, 0:53 each element is made up of a rectangle or a box. 0:58 So, in order to effectively understand the CSS box model concept, 1:01 we need to know the two ways elements are naturally displayed. 1:05 So, every element has a display value, depending on what type of element it is. 1:09 The default for most elements is usually block or inline. 1:13 Now, block elements form a separate block that takes up 1:17 the full width available based on the width of its parent element, and 1:21 it creates a new line before and after the element. 1:25 Some examples of block elements are divs, paragraph, any heading tag, or list items. 1:29 So, notice how the block-level divs on our page, as well as the headings and 1:37 lists are taking up an entire line of content. 1:43 They're also forcing a new line of content before and after the element. 1:48 And we can see that as well down here in our footer div. 1:53 Now, inline elements only take up as much width as they need to. 1:57 They don't force any new lines, and they stay inline with the rest of the content. 2:01 Some examples of inline elements are span tags, images, and anchor elements. 2:06 So, notice how the anchor element, or 2:11 linked boxes, stay in line with the rest of the content in our paragraph. 2:13 The same thing happens up top in our title span element. 2:18 Notice how its width only takes up the space of its content. 2:22 And the reason it's displayed on its own line is because there's a block-level h1 2:26 element underneath it. 2:31 The block-level h1 is forcing the new line. 2:33 So now let's discuss how padding, borders, and 2:37 margins interact with each to form a box because it's important to understand. 2:39 [SOUND] The box in the box model is made of 2:44 four distinct parts that calculate its size. 2:47 And visually, it's rather simple as we can see here. 2:51 The innermost area and core component of the box is the content area, [SOUND] which 2:54 is the area containing the element's actual content, like text or an image. 2:59 Surrounding that content area is the [SOUND] padding area. 3:04 Padding is often used to give the content area some breathing room by 3:08 separating the content from the surrounding border area. 3:12 And the border area of [SOUND] the box is the outermost part of the box. 3:15 You can think of it as an outline to the box. 3:19 Although borders are optional, different styles like color and 3:22 thickness can be applied to them. 3:26 Finally, the [SOUND] margin area exists outside of the box. 3:27 It's this space around an element that separates it from other elements. 3:32 So the most important thing to remember here is 3:37 [SOUND] the padding area creates space inside the box, 3:39 while the margin area [SOUND] creates space outside and around the box. 3:42 So, as we can see, padding, borders, and 3:47 margins are important components of the CSS box model. 3:49 They are the properties that essentially wrap the content area of a box. 3:53 So, now that we've covered the main properties of the box model, 3:58 we're ready to put these concepts to work. 4:01 That's coming up next. 4:03
You need to sign up for Treehouse in order to download course files.Sign up