Using the Padding and Margin Selectors In CSS
So you want to add spacing around your HTML elements with CSS? Well you have landed on the right page! Using padding and margin are essential tools while building your websites. You can use it to add spacing throughout your page and give elements such as text breathing room or space div’s apart from one another to give your website a better flow. In this example we will create several elements and see how padding and margin effects each.
We chose Server Intellect for its cloud servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Padding And Margin</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div class="firstbox">
<div class="smallbox">
<p>This Box Is Using Margin</p>
</div>
</div>
<div class="secondbox">
<div class="smallbox">
<p>This Box Is Using Padding</p>
</div>
</div>
<div class="thirdbox">
<div class="smallbox">
<p>This Box Is Using Padding and Margin</p>
</div>
</div>
</div>
</form>
</body>
</html>
If you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
Here we have three divs all named sequentially. Margin adds spacing to the outside of the element and gives the element itself room to breathe, this is the selector you would use to add a gap for instance between to divs or some list items in an unordered list. Padding adds spacing within the element, for instance you may have a paragraph inside of a div, by default (disregarding browser defaults) your paragraph would be flush with the side of the div and would reduce readability and make your text look crowded. Now we will go ahead and add these elements to our divs and walk through how each one is being affected.
*{padding: 0px;
margin: 0px;
}
#wrapper
{
width: 960px;
margin: 0 auto;
border: 1px solid #000;
}
.redbox
{
width:400px;
height: 30px;
border: 1px solid blue;
background-color: #bd0f0f;
margin: 10px;
}
.bluebox
{
width:400px;
height: 30px;
border: 1px solid red;
background-color: #bd0f0f;
padding: 10px;
}
.smallbox
{
margin: 0 auto;
background-color: #0081bd;
}
Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we’ve found so far.
FirstBox Div
This div only has margin applied to it so it gives itself 10px all around the element and essentially pushes itself away from the sides of the div.
SecondBox Div
This div only has padding applied to it, so as it only affects the inside of div. So as you can see the padding does add spacing within it and the text div is pushed inwards by 10px on all sides.
ThirdBox Div
This last div has margin and padding applied to it. This shows the element spaced from the side of the div as well as giving it’s inner elements space.
Success!
Congratulations! You are now ready to wield the swords of padding and margin and slice through cramped websites like warm butter. Understanding how these two declarations work is key in making readable and beautiful websites, use them correctly and injunction with each other and you will never burn your toast again. Have a good one!
PaddingandMargin
