Margins & Padding

Adjusting webpage layout HTML and CSS

Sticky Note Padding and Margins
Padding indicates whitespace inside an HTML element and margins indicates whitespace outside the element. Older HTML 4.01 websites use cell padding and spacing in HTML tables. In newer template webpages, padding and margins are set in the css code.

See Also…

HTML 5 Example
Padding and margins are set in the css style file(s) included with the template download. In each css file, notes are included to indicate what a section of code is used for. If you want to set padding in the main text content area, for example, edit the following in your css file:

.content-pad { padding: 0px 35px 10px 15px; }

Padding above in order is top, right, bottom, left.

Note: Padding and margins may be included in other "content" or "wrapper" classes.

For css used in the sidebar search your css file for SIDEBAR. For footer code search for FOOTER and so forth (search for "menu", "jquery", "slideshow", "contact", etc).

Margins and padding for the menus will either be in the menu.css file or near the bottom of your main css file (style.css). You can optionally search for "padding" in any css file to locate style code used for whitespace.


HTML 4.01 Example
Adding White Space:
Code for older HTML 4.01 websites and web templates. Your template code may be slightly different than as indicated below.

Open an HTML document you wish to modify in Notepad or your HTML editor in source code view. Look for a note similar to the one shown below:

<!-- START CONTENT TABLE -->
<table cellpadding="0" cellspacing="5" border="0" width="575">


The code above has the HTML table set with a width="575". Templates may have a width defined in pixels like the example, or the width may be defined in percents. Example: width="100%". This code can be freely changed to make the template tables a different width and create more whitespace.

Edit the cellspacing="5" to a greater number to add more whitespace.

Try changing the border="0" to border="1" and viewing the page in your web browser. You will then be able to see where the table you are trying to edit is located on the page. This will make it easier to understand and re-size the tables.

The template you are editing may be different from the above example and some margin and spacing code may be defined in the CSS file.

If you adjust the table width, and cellpadding or cellspacing, and your page is not updating, code for the width, padding and margins may be defined in your template CSS file.


Whitespace Left and Right
In some templates table right and left spacing may be defined in the CSS file. The CSS classes may be "rightspace" or "whitespace" or something similar. You can try a search for "space" in the CSS file to locate these classes.




Related Topics:
Editing HTML5 Tables
Editing HTML 4.01 Tables