Margins and Padding can be confusing, here’s how to tell them apart, aswell as how to implement HTML borders.
As mentioned earlier, HTML is based on a box model. We can control the borders, margin, and padding on any one of the boxes side independently or altogether. We will use borders, margins, and padding to control how our divisions interact with the content within, and around them.
To Demonstrate borders we will declare a simple Division in a CSS file linked to a HTML document. We will set a width and height of this division and give it a border to make it a white box with a black border. We can also set the type and thickness of this border.
And in our HTML
The margin is the allowed distance from the border of a box to the to another box. Adding the Margin property to the CSS above and adding a second division in the HTML we can see the effects of setting a margin. Add Margin: 20px; to the above CSS and in the HTML (Note you can also control all 4 margins separately with margin-top: etc)
Also Note that because each box has a 20 pixel margin the boxes are actually 40 pixels apart
Setting the margins to auto is a good way to center an element.
Padding is often easily confused with Margins. However, padding is actually the allowed distance between a boxes border and its inner elements. If we had a textbox and wanted the text to not be directly touching the edges of the text box we would set a padding on the textbox.
Here is CSS and HTML code for a simple textbox
And the HTML
<LINK REL=StyleSheet HREF=”site.css” TYPE=”text/css”>
<p> as you can see this text is not touching the border edges</p>