Controlling Page Margins with External CSS

Printed from BasicTips.com, FREE helpful articles and tips for Webmasters and Business Owners
Copyright © 1994-2006 by BasicTips.com, a division of BasicTemplates.BIZ
All rights reserved. Republication in whole or in part in any form is not permitted.

Sponsored by BasicTemplates.BIZ
Website Templates with External CSS and Removable Graphics
http://www.BasicTemplates.biz

Co-Sponsored by Effective-Website-Secrets.com
Teaching webmasters effective web development and marketing techniques via free podcasts.
http://www.Effective-Website-Secrets.com

Category: CSS
Controlling Page Margins with External CSS
By BasicTemplates with External CSS

What are page margins and why would you want to use them? You have seen them before but may have not realized it. Some web pages have a margin (space around the edges of the browser window). Web pages that do not have a page margin, will display the page content and graphics flush with the browser window. Each method has a purpose and creates a different effect. Try using different page margin values with your web site and see which you prefer.

The HTML code for page margins is shown below, BUT if you want to make your page margin changes in just one file so you can change it site wide rather than on each individual HTML page, did you know that you can do this using external CSS?

HTML method (add code the BODY tag of your web page source code):

<BODY LEFTMARGIN="10" TOPMARGIN="10" MARGINWIDTH="10" MARGINHEIGHT="10">

CSS method (add code to the BODY tag of your external style sheet):

body {margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;}

To reduce your margins to zero (all page content is displayed flush with the browser window) simply change the values to zero or zero pixels.

In the example code above, all page margins are set to 10.