Setting Page Margins
The final property to experiment with in this lesson is the margin tag. By default, web browsers DO have a margin on the top, bottom, left and right of the page (In fact, if you want to get rid of the margin, you have to specifically set it to zero!). We are going to take control of the margin property.
First, let's set a consistent margin of 20 pixels (20px) on all four edges of the page:
<!--
body {background-color: #FFFFCC; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 20px;}
-->
</style>
Yours should look like the example below. You can see that the default page margin is probably very close to 20px:
Please do experiment with the margins. I suggest you try a setting of 0px and see what happens!
Margins may also be expressed as a percentage of the screen size, rather than fixed pixels. Let's try changing the margin settings from 20px to 10%
<!--
body {background-color: #FFFFCC; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; margin: 10%;}
-->
</style>
When you test the web page, make sure you resize the browser window and watch what happens to the left and right side margins.
Often times you won't want all four margins to have the exact same settings. You can set each of the four margins independently using the following properties: margin-left, margin-right, margin-top, margin-bottom. Let's set the sides margins at ten percent, and make the top a fixed 20 pixels:
<!--
body {background-color: #FFFFCC; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000; margin-left: 10%; margin-right: 10%;margin-top: 20px;}
-->
</style>
Test your work! Keep experimenting until you find a combination you like:
