Width and Height Properties

[MUSIC] 0:00 So, now let's see how everything we've learned so 0:04 far about the box model applies to building a basic layout. 0:07 So, by default, an element's width and height are as wide or 0:11 as tall as the content it holds. 0:15 But we're also able to set our own dimensions using the width and 0:18 height properties. 0:21 Now, the width and height properties can accept length units such as pixels, 0:23 ems, or percentages and their values. 0:28 In the previous stage, we learned that when we use a percentage value for 0:30 width, the width is measured relative to the parent element's width. 0:35 So, the 60% width value we gave our primary and secondary-content 0:38 divs earlier adjust based on the parent body element, which is 100% by default. 0:45 But pixel values are still commonly used for layout because, as we've learned in 0:52 previous videos, they allow us precise control over the size of an element. 0:56 For instance, you'll notice this large arrow image in our header. 1:02 Now, the arrow image is embedded as an SVG, or Scalable Vector Graphics. 1:07 So, we'll need to scale it down with a width property. 1:12 So, let's give the image element on line ten a class of arrow. 1:15 So, now let's save our index.html file and go back to our style sheet. 1:23 And all the way at the bottom underneath the wildlife rule, let's go ahead and 1:28 target that new arrow class. 1:32 And we're gonna give our arrow rule a width property, and 1:37 let's set the value to 50 pixels. 1:41 So let's save our style sheet, and 1:45 go back to the browser preview and refresh the page. 1:46 So, now we can see how our arrow image is now 1:50 scaled down to 50 pixels wide while maintaining its proportions. 1:53 So, next for our Lake Tahoe page design, 1:59 we'll want to increase the height of our main header element. 2:02 So, let's do that with a height property. 2:05 We'll go back to our style sheet, and 2:08 let's scroll up to the main header rule right here under Main Styles. 2:10 And right beneath the background-color property, let's add a height property. 2:16 And we're going to set the height value to 850 pixels. 2:21 All right, so let's take a look. 2:25 We'll save our style sheet and refresh the page, and 2:26 now we see how our header is much taller. 2:30 And we're going to use this space later when we 2:33 add a nice background image to our header. 2:36 Keep in mind that when a width or height is defined on a element, we're not exactly 2:39 defining the entire area of the box, meaning the content, padding and borders. 2:43 We're actually just defining the width for the content area itself, and 2:49 this can actually create some issues, especially when building layouts. 2:53 I'll show you what I mean. 2:56 So, let's go back to our main header rule, and we're gonna add a padding-top 2:58 property, and we're going to set the top padding to 170 pixels. 3:03 Now, when we add the top padding, 3:09 notice how the height of the header increases by 170 pixels. 3:12 And if we once again open up our Chrome developer tools by clicking the right top 3:18 icon menu here, then highlighting More tools, then clicking Developer tools, 3:23 when we inspect the height of our header, notice how instead of being 850 pixels 3:29 tall like we need it to be, our header's actually 1,020 pixels tall. 3:35 Well, that's happening because the browser, based on the box model, 3:40 calculates a total height value by taking the height value we define and 3:44 adding the padding-top value and any padding-bottom or any top and 3:50 bottom border styles we define. 3:54 So, if we were to add borders to our header or 3:56 bottom padding, the total height would increase based on those additional values. 3:59 And if we scroll down, we're also seeing that happening in our wildlife container. 4:03 The top border and 4:08 padding values are increasing of the total height of the element. 4:09 And the same issue that happens with height also happens with 4:14 the total width value of an element. 4:17 And this can make our layout elements wider than they need to be. 4:19 I'll show you a good example of this. 4:22 So first, let's go back to our style sheet, and let's find our primary and 4:24 secondary-content rules right here under Layout Styles. 4:29 And let's set their width back to a fixed width of 960 pixels. 4:34 So, we're going to replace the 60% width value to 960 pixels. 4:39 So now if we save our style sheet and refresh the browser, 4:45 we can see that our secondary and primary-content is our 960 pixels wide. 4:49 But now, we'll want to add left and right padding to the content divs just to 4:55 have a little separation between the content page and the margins. 5:00 So, let's go back to our primary and secondary-content rule, and 5:05 right beneath the width property, let's add a padding-left property, 5:09 and let's set the value to 50 pixels. 5:15 And right below that, let's add a padding-right property, and 5:18 let's set the value to 50 pixels as well. 5:23 So now when we save our style sheet and 5:26 take a look at our layout, and refresh the page, and once again, 5:29 use the dev tools to inspect the primary or secondary-content containers, 5:33 notice how the total width now expands to 1,060 pixels wide. 5:38 It's adding 100 pixels to the total width because we've added 50 pixels of 5:43 padding to the left and right sides of the div. 5:48 So, like with the height property, the browser calculates the total width value 5:52 by adding the width value we define with any left or 5:58 right padding and border width values. 6:02 So, with all that being said, 6:04 what if we need these container divs to be exactly the width and height we specified? 6:06 And we actually do in our case. 6:11 Well, we could do a bit of math and maybe subtract the padding or 6:13 border widths from the total width or height volume we defined. 6:18 For instance, instead of 960 pixels, we can set the width value here 6:23 to 860 pixels to compensate for that extra 100 pixels of padding. 6:28 Well, sure, this works just fine, but imagine having to do this for 6:33 every element in our layout that has a width, height, or padding and 6:38 border width defined, right? 6:41 Well, in the next video, we're gonna learn a better solution for this. 6:43