1
00:00:00,120 --> 00:00:06,780
Now that we have an understanding of I.D. classes in divs we can explore some of this style definitions

2
00:00:07,020 --> 00:00:14,910
that allow us to customize the look of our HMO elements will begin with margins margins allow you to

3
00:00:14,910 --> 00:00:22,110
add spacing around the perimeter of your element a margin can be added to any one side or a combination

4
00:00:22,110 --> 00:00:30,410
of sides let's add some margins to the div we created in the last lecture in order to see the bottom

5
00:00:30,410 --> 00:00:39,050
margin we will need to place a line of text underneath the div so enter a line of text and you can enter

6
00:00:39,080 --> 00:00:42,920
this line of text in a new div underneath your original

7
00:01:02,510 --> 00:01:09,080
now to apply the margin we need to add the margin definition to our give 1 I.D..

8
00:01:09,290 --> 00:01:12,080
This is because we're adding the margin to Div 1

9
00:01:16,160 --> 00:01:26,230
to add a margin simply type in margin call in and then the amount of the margin will go with a ten pixel

10
00:01:26,230 --> 00:01:33,790
margin to begin with and we'll increase it to show you the difference so let's let's take a look at

11
00:01:33,790 --> 00:01:35,500
what a 10 pixel margin looks like

12
00:01:41,120 --> 00:01:51,270
so we've saved our file and I'm going to preview it in the web browser.

13
00:01:51,480 --> 00:01:59,300
This is the margin at 10 pixels so a 10 pixel margin has been added to the top the bottom left and the

14
00:01:59,300 --> 00:02:02,000
right.

15
00:02:02,110 --> 00:02:06,460
Let's go ahead and increase the amount of the margin to see the difference.

16
00:02:06,520 --> 00:02:13,090
I'm going to go from a 10 pixel margin to a 30 pixel margin and just save

17
00:02:16,200 --> 00:02:22,890
and refresh the page so you can see that it increases the amount of margin by 20 pixels

18
00:02:26,960 --> 00:02:33,750
you'll see for example we did one at a margin on every side.

19
00:02:33,840 --> 00:02:40,050
We only wanted to apply the margin to the bottom and left side while in that case we wouldn't.

20
00:02:40,080 --> 00:02:42,150
Our style definition would look like this

21
00:02:53,480 --> 00:03:02,080
this instructs the web browser to put a zero pixel border sorry a zero pixel margin on top the second

22
00:03:02,080 --> 00:03:08,760
value is a zero pixel margin on the right.

23
00:03:08,910 --> 00:03:12,460
The third is represents the bottom margins.

24
00:03:12,470 --> 00:03:14,930
That's 30 pixels on the bottom.

25
00:03:14,930 --> 00:03:25,140
And the last value is the left margin so that's 30 pixels on the left side of the div so we'll see that

26
00:03:28,420 --> 00:03:30,580
and actually I'll just increase it to 50.

27
00:03:30,580 --> 00:03:39,510
So we can actually see the difference I'll save that and refresh the browser.

28
00:03:39,740 --> 00:03:47,750
So now we have no top margin we have no right margin but our left and bottom margin has increased.