Margins

Like the previous properties we've discussed, we can also define a margin for 0:00 each side of a box. 0:04 And like the padding property, the margin property accepts percentage values or 0:06 any length values. 0:10 Now we already know about the clockwise, top-right, bottom-left order of values for 0:12 the padding and border shorthand property. 0:17 Now, the same order of values also applies to the margin property. 0:20 So let's go back to our wildlife rule, and 0:24 right beneath the border-top declaration, let's add a margin property. 0:28 And now we're gonna define all the margin values using the shorthand notation. 0:33 So if we write our margin value as 105 pixels followed by 0, 0:38 followed by 60 pixels and 0, 0:43 this is exactly the same as writing out the full declarations for 0:46 margin-top, margin-right, margin-bottom, and margin-left. 0:52 And I'm just pasting these in here as reference. 0:58 But I will comment them out so you can see what they are. 1:01 And remember, since the right and left margin values are the same, 1:07 they're both 0, we can simply define this as three values. 1:11 So, let's make the value 105, 0 and 60 pixels will omit 1:16 the fourth zero and now the first value applies to the top side only, 1:21 the second value applies to the right and 1:26 left sides of the div, and the third value applies to the bottom side only. 1:29 So when we save our stylesheet and refresh the page, now we're able to see that 1:33 105 pixels of margins above the div, and the 60 pixels of margin below. 1:39 And unlike padding, the margins create separation by pushing away from other 1:46 elements, so the margin is applied outside the border area. 1:51 And we're actually able to examine and 1:55 edit each element's box model parameters in our browser's developer tools. 1:58 So in the Chrome browser, if we click the top-right menu icon then 2:02 highlight More Tools and click Developer Tools, 2:08 notice how a panel opens up at the bottom of our browser window. 2:13 So in the top-left corner of the panel, we should see a magnifying glass icon. 2:17 When we click on it, it allows us to inspect the styles of any element. 2:22 So if we hover over and select the Wildlife div, we can 2:26 see all the CSS properties we gave it over here to the right in the styles panel. 2:31 So if we scroll down, we can see all the box model parameters for 2:36 the Wildlife div element. 2:39 So when we hover over the center, it highlights the content area and 2:41 there we see where the padding area starts and ends, same with the border areas and 2:46 the margins. 2:52 And we see the margin area outlined with orange. 2:54 So this is a perfect example of the box model at work. 2:57 Now in the teacher's notes, I'll provide more information and 3:01 related videos about the Chrome Developer Tools, if you wanna learn more. 3:04 Also Firefox, Safari, and IE have similar developer tools for 3:07 inspecting an element's styles and box model parameters. 3:12 So I'm gonna go ahead and close the panel for 3:15 now by clicking the close icon over here on the top-right corner of the panel. 3:16 So next, let's give our h2 and h3 elements a bottom 3:22 margin that gives them a little bit of separation from the content below. 3:27 This time we'll define the margins using M units. 3:32 So let's go back to our style sheet and let's scroll up to the h2 rule. 3:35 And let's add a margin properties, so 3:40 right below the line height declaration, let's type margin. 3:42 And we'd like to give our h2 a bottom margin, so let's make this margin-bottom, 3:46 and we want the bottom margin equivalent to about 26 pixels. 3:53 So we'll need to divide that desired margin of 26 pixels 3:58 by the pixel font size value of our heading two. 4:03 Remember, this M value is now equivalent to 53 pixels. 4:06 So if we divide 26 by 53, it gives us an M value of 0.5m. 4:11 So next step, 4:19 I'm gonna add a comment that will let us know what this value means in pixels. 4:20 So we're gonna type 26 pixels. 4:25 So if we save our stylesheet and go back to the browser and 4:29 refresh the page, there we see that margin sort of closed up a little bit. 4:32 It's now 26 pixels, which is exactly what we want for our h2. 4:36 So next, we're gonna do the same for our h3's bottom margin. 4:42 So in our h3 rule below that line height declaration, let's add a margin-bottom 4:46 property, and we'll want this bottom margin equivalent to 34 pixels and M's. 4:53 So again, we're gonna divide the desired 34 pixels 4:58 by the h3's pixel font size of 20 pixels. 5:03 So 34 divided by 20 gives us an M value of 1.7m. 5:06 And just like we did before, 5:12 let's add a comment that let's us know what this value means in pixels. 5:14 So let's type 34 pixels. 5:19 So now when we save our stylesheet and refresh the browser. 5:20 If we scroll down to our h2 we can see that .5m bottom 5:24 margin value equivalent to 26 pixels for our h2. 5:29 And right below that you can see that 1.7m bottom margin value 5:33 equivalent to 34 pixels in our heading threes. 5:37 And keep in mind that we're also able to use negative values in margins. 5:41 So back in our CSS, if we scroll back down to the bottom of the page and 5:46 find our wildlife rule, let's go to our margin shorthand declaration. 5:51 So let's go ahead and write, instead of 105 pixels, 5:57 let's write that says negative 50 pixels. 6:01 When we save our stylesheet and refresh the page, 6:05 notice how it pulls the div element up by 50 pixels. 6:09 So as we can see it's causing the elements above to sort of 6:13 overlap the box parameters of our Wildlife div. 6:16 So if we go back and remove that negative top value, I'll just undo it and 6:20 instead, we'll give our div a negative bottom margin. 6:24 So instead of 60 pixels let's say negative 60 pixels. 6:28 When we go back and refresh, 6:32 we can see how instead it pulls any succeeding element into the main element. 6:34 So that's why we're seeing the content of the bottom element overlapping the box 6:39 parameters of our Wildlife div. 6:43 Now in most cases, it's best to avoid using negative margin values for 6:47 layout, mainly because we're sort of pushing or pulling elements to and 6:51 from spaces they're not supposed to occupy by default, as we're seeing here. 6:55 But they do have their use. 6:59 So if you watch the first stage of the CSS layout techniques course you'll learn 7:01 how negative margins can be useful in certain cases. 7:05 Now in our case, let's set the margin value back to 105, 0, and 60. 7:08 [BLANK_AUDIO] 7:14 Finally, what we're gonna do next is center the primary and 7:22 secondary content divs on the page. 7:25 Now, I don't know about you, but I'm getting pretty tired of 7:28 seeing the main content over here to the left side of the page. 7:30 So let's center it in the browser. 7:34 We'll go back to our stylesheet and find the primary and 7:38 secondary content rule, right under the comment for layout styles. 7:41 And then let's add a margin property underneath the with declaration. 7:46 So when we use the value auto, 7:52 the browser automatically calculates the margins for each side. 7:54 And when it does that, all the margins are set to be equal. 7:58 So if we save our stylesheet, go back to the browser preview and refresh the page, 8:02 notice how it centers the div perfectly inside its available space. 8:08 So now there's equal margins on the left and right sides of the browser window. 8:12 Nice. 8:18 So next, we're gonna take a co-challenge where you'll write some of the padding, 8:19 border, and margin styles for parts of our Lake Tahoe website. 8:23 Be sure not to skip it. 8:26