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.
Borders
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.
#borderexample
{
Division with Borders
height: 200px;
width: 200px;
border-color:yellow;background: red;
border-top-style:solid;
border-bottom-style:solid;
border-right-style:dotted;
border-left-style:dotted;
border-top-width:5px;
border-bottom-width:10px;
border-right-width:15px;
border-left-width:20px;
}
And in our HTML
<div id=”borderexample”>
</div>
Margin Example
Margins
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)
<div id=”borderexample”></div>
<div id=”borderexample”></div>
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
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
#textbox
{
height: 200px;
width: 200px;
background: white;
Padding Example
border-color:black;
border-top-style:solid;
border-bottom-style:solid;
border-right-style:solid;
border-left-style:solid;
border-top-width:2px;
border-bottom-width:2px;
border-right-width:2px;
border-left-width:2px;
Padding:20px;
}
And the HTML
<html>
<head>
<title>My Website</title>
<LINK REL=StyleSheet HREF=”site.css” TYPE=”text/css”>
</head>
<body>
<div id=”textbox”>
<p> as you can see this text is not touching the border edges</p>
</div>
</body>
</html>
[...] Borders, Margins and Padding [...]