Margin and Padding

Submitted by: 
Language: 

Introduction:
This is the fourth part in my CSS Styling tutorials, in which I will be covering Margins and Padding.

Difference?
Both the margin and padding properties give white space around an object, the main difference is the order of which they occur in. At the same time, margin is mostly used for positioning while padding is used for giving white space around an object.

Order:
As a good example of which order the properties go in, please see that attached image which is a screen shot of the Inspect Element feature within Google Chrome. This handy, interactive image highlights the different properties around the selected element right on the page so you can see exactly where each white space is. It also shows the order the properties go in (from furthest away to the closest to the element);
Margin
Border
Padding
Element

In the screenshot, I am hovering my mouse over the padding element which is highlighting it on the page as green. The order of the properties is important because it allows more customisation for your elements (for example, in the image there is padding to make the border separate from the text, if margin was used, the border would be right up against the text and there would be white space around the outside of the border).

Setting Margins and Paddings:
A custom margin and padding can be set for each element, this is done by defining the property followed by the value, just like any other CSS property.

Setting a 5px (pixel) margin all around the element...

  1. margin: 5px 5px auto;

The above margin property sets the margin in the order of Top, Right, Bottom, Left. If two arguments are given (top and right) followed by auto, the bottom will be the same as the top, and the left will be the same as the right. Otherwise, if one property is given (top) followed by auto, the bottom will be the same as the top, and the left and right will be equal to the full width of the container where the element is stored (in other words, the element will horizontally center).

Setting a 5px (pixel) margin all around the element, separately (any can be removed to give sides different values)...

  1. margin-top: 5px;
  2. margin-bottom: 5px;
  3. margin-left: 5px;
  4. margin-right: 5px;

Setting a 5px (pixel) padding all around the element...

  1. padding: 5px;

Setting a 5px (pixel) padding all around the element, separately (any can be removed to give sides different values)...

  1. padding-top: 5px;
  2. padding-bottom: 5px;
  3. padding-left: 5px;
  4. padding-right: 5px;

When are they used?
Margins and paddings can be used to position any HTML element or object. They can be used despite the position value of the element (absolute, relative, etc.).

Linking CSS To a HTML Element:
To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...

  1. class='myClass'

... to the attributes of that element if you chose a class, or...

  1. id='myID'

if you chose an id.

Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...

  1. .myClass {
  2. //Properties go here
  3. }

if you chose a class, or...

  1. #myID {
  2. //Properties go here
  3. }

(You can remove the line beginning with // if you wish).

Here's an example...

  1. <html>
  2. <head>
  3. <style>
  4. .margincenter {
  5. color: blue;
  6. width: 300px;
  7. height: 100px;
  8. margin: 0px auto;
  9. //Margin centered.
  10. }
  11.  
  12. .padded {
  13. color: #1a1a1a;
  14. width: 300px;
  15. height: 100px;
  16. padding: 5px;
  17. //Padded by 5px
  18. }
  19.  
  20. .marginpadded {
  21. color: #000;
  22. width: 300px;
  23. height: 100px;
  24. margin-top: 10px;
  25. margin-left: 6px;
  26. margin-bottom: 1px;
  27. margin-right: 20px;
  28. padding: 2px 5px 10px 20px;
  29. //Margined and padded.
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class='margincenter'>This div is centered through the use of margins.</div>
  35. <div class='padded'>This div is padded by 5px all around it.</div>
  36. <div class='marginpadded'>This div has some margin and padding.</div>
  37. </body>
  38. </html>

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.