Controlling Page Margins with External CSS

    November 5, 2003

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):


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.

Click here to sign up for FREE Tech. newsletters from iEntry! designs Website Templates with External CSS and has been providing webmasters worldwide with affordable template designs since 1994. BasicTemplates currently offers 650+ designs which may be purchased individually or get complete access to all templates via an affordable membership plan. Most templates were strategically designed with interchangeable graphics and elements to increase the potential number of design layouts for the end user. Each layout utilizes an external style sheet for easy site maintenance and to ensure fast page load.