OK. This one is for my own benefit and anyone else who struggles with layout in html.

When I’m trying to sort out customised pages, particularly in WordPress, I tend to mess up border, margin, padding and content. Thanks to w3schools.com this is what I need to remember.


box-modelThe rules are important and can lead to hours of irritation if you don’t get them right.

This is the bit that you need to know:

Explanation of the different parts:

  • Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
  • Border – A border that goes around the padding and content. The border is inherited from the color property of the box
  • Padding – Clears an area around the content. The padding is affected by the background color of the box
  • Content – The content of the box, where text and images appear

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Another tool for people who struggle with these things is Firebug for Firefox, a fantastic plugin.

I’ve posted this because I’ve been there and know how frustrating it can be.

Print Friendly, PDF & Email