Width and Height Properties6:49 with Guil Hernandez
By default, an element's width and height are as wide or as tall as the content it holds. But we're able to set our own dimensions with the 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
You need to sign up for Treehouse in order to download course files.Sign up