Margin, padding and border of HTML elements

This post is about my experiments with blogger template and CSS!

I developed the template for this blog myself. I do not like the jazzy colorful pages for a tech blog. Most people visit this blog for ‘technical reasons’ only and so the jazzy is not good.

Also, I found some issues with most of the available templates – such as the side bar not aligning properly. I think the blogger templates do not take care of the search engine optimization, too. So now I am on to developing my own template.

I followed the simple design with a header, footer, content body and sidebar, with borders. I had tough time getting the page looking almost similar in both Internet Explorer and FireFox. This was mainly because I did not want to use fixed width. I like percentage width specification for content oriented websites for better readability and printing.

Second reason being I wasn’t using padding, border and margin properlies of elements correctly.

Padding add extra space inside the border.

Margin add extra space outside the border.

So, border is between padding and margin!

The links below were really helpful.

• CSS Box Properties
• Padding and margins