Margins, padding and widths can only be applied to block level elements.

If you wish to apply them to inline elements like <a> tags or <span> tags then you need to define those tags as block elements in your stylesheets. Eg.

span { display: block }

18 October 2006

Reduce the size of your stylesheets by using shorthand styles.

For example:

margin-top: 0;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;

can be written:

margin: 0 0 5px 0;

(always top, right, bottom, left). 18 October 2006

Avoid the box model hack by never defining padding and width in the same style.

This is because some browsers add the padding and width together to size the element while others include the padding in the width. For example. If you needed to style this block of HTML:

<ul>
<li>
<a href="home.html">Home</a>
</li>
</ul>

you should use the styles:

li { display: block; padding: 10px; }
a { display: block; width: 50px; }

NOT

li { display: block; padding: 10px; width: 50px }

Remember, if you wish to add padding, margins or widths to an element you must define it as a "block" element first. 18 October 2006