Now that we have an understanding of IDs, Classes and DIVs, we can explore some of the style definitions that allow us to customize the look of our html elements.
We 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>. Enter a line of text in a new
<div>, underneath your original.
<div>This is another sample line of text</div>
Now to apply the margin, we need to add the
margin definition to our div1 ID, since we are adding a margin to div1.
We can add a margin on all sides of the
<div>, by entering:
Margin: 10px; - This adds a 10 pixel margin around each side.
Save the file and preview it in your web browser. The
<margin> has been added on all sides of the
Say for example we only wanted to apply the
<margin> to the bottom and left side. Then we would need to add the following to our definition:
Margin: 0px 0px 10px 10px;
The first value is the top margin, followed by the right, bottom and left. Here we have added a 20pixel margin to the bottom and left side.
Save and preview the file to see the final result.