Now that we have an understanding of I.D. classes in divs we can explore some of this style definitions
that allow us to customize the look of our HMO elements will begin with margins margins allow you to
add spacing around the perimeter of your element a margin can be added to any one side or a combination
of sides let's add some margins to the div we created in the last lecture in order to see the bottom
margin we will need to place a line of text underneath the div so enter a line of text and you can enter
this line of text in a new div underneath your original
now to apply the margin we need to add the margin definition to our give 1 I.D..
This is because we're adding the margin to Div 1
to add a margin simply type in margin call in and then the amount of the margin will go with a ten pixel
margin to begin with and we'll increase it to show you the difference so let's let's take a look at
what a 10 pixel margin looks like
so we've saved our file and I'm going to preview it in the web browser.
This is the margin at 10 pixels so a 10 pixel margin has been added to the top the bottom left and the
right.
Let's go ahead and increase the amount of the margin to see the difference.
I'm going to go from a 10 pixel margin to a 30 pixel margin and just save
and refresh the page so you can see that it increases the amount of margin by 20 pixels
you'll see for example we did one at a margin on every side.
We only wanted to apply the margin to the bottom and left side while in that case we wouldn't.
Our style definition would look like this
this instructs the web browser to put a zero pixel border sorry a zero pixel margin on top the second
value is a zero pixel margin on the right.
The third is represents the bottom margins.
That's 30 pixels on the bottom.
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
and actually I'll just increase it to 50.
So we can actually see the difference I'll save that and refresh the browser.
So now we have no top margin we have no right margin but our left and bottom margin has increased.