HTML Boxes are the building blocks of design in most modern web pages. So many people don’t remember the difference between the “main area”, “border”, “padding” and “margin”. Today’s lesson will go over the differences and a visual reminder of what each looks like.
Here’s the legend
The Green band is the “Margin”. If the main area has a background the “Margin” does not take on this property. It does however take on the background of what ever is behind it.
The Greyish band is the the “Padding”. Unlike the “Margin” the padding takes on the background of the object. This is great to use when you have a background that is attached to the object but you want the text pushed to the side of it.
The White area is the main area. Any items placed in this box must conform to the size of it’s width.
Where is the Border? There is no border in this example. The boarder how ever would go in between the Green and the grey area.