Website design - page margins in HTML
Almost every site has page margins, which are the empty space to either side of the page. Here, look:
Example of page margins (the black to grey gradients on either side)
What are the point of these margins? Personally I think it's to make the page look more attractive. Though perhaps it's because the webpage is designed to be seen on a smaller screen, and the margins are just the developers' empty space since my screen size is too large? I admit that they do look appealing, though perhaps when a website has a lot of functions and options (facebook, email) the space is better served with actual content.
I found out how to reproduce them using HTML.It's easy.
First, specify the colour of the margins by setting the body background colour.
<body bgcolor="#000000">
Then make a table, which will enclose all your content for the webpage (not including the margins)
<table align="center" style="background-color:white;">
<tr><td>content</td></tr>
</table>
The code aligns your table in the center of the screen, so that you get margins on either side and not just on the right-hand side.
The width can be changed to your liking too. 1000 seems to look good on my monitor - mine is 1366 pixels wide (and 768 high - the most popular screen size at the moment, apparently). Because the table is a fixed width, resizing the window will cause the computer to shrink the margins first, which is ideal, because they're only for aesthetics.
Comments
2013-02-05 Lowell Nguyen
Thank you for sharing this info! The margins add more legibility and tone to the overall design of the website. Sometimes, it's where Adsense, Click bank, and social media icons are placed.
Reply
Leave a comment