In CSS, the two properties that makes spacing possible are padding and margin.

  • The padding represents the inner space of an element
  • The margin is external

 

Explanation of the different parts:

Content – The content of the box, where text and images appear
Padding – Clears an area around the content. The padding is transparent
Border – A border that goes around the padding and content
Margin – Clears an area outside the border. The margin is transparent

Difference between margin and padding.

  • Margin is outer space of an element, while Padding is inner space of an element.
  • Margin is the space outside the border of an element, while Padding is the space that is inside the border of it.
  • Margin can be value auto: margin: auto, but you can’t give Padding the value of auto.
  • Margin can give value of positive or negative (or zero), otherwise, Padding must be positive (or zero).
  • In navigation bars or anchors (links) and other tags, Padding is a part of element that accepts changes. When you style an element, changes not occurs to Margin, but the space that Padding has created will be change.

Tips: You can see these differences on some tags that you use to control other tags; like div and span, or section and article

[ad type=”banner”]

Padding Property:

  • The CSS padding properties define the space between the element border and the element content.

You can define the padding value the following way:

  • padding-top: 10px;
  • padding-right: 10px;
  • padding-bottom: 10px;
  • padding-left: 10px;

You can also use the shortand property:

padding:30px 55px 80px 110px;

  • top padding is 30px
  • right padding is 55px
  • bottom padding is 80px
  • left padding is 110px

padding:30px 55px 80px;

  • top padding is 30px
  • right and left paddings are 55px
  • bottom padding is 80px

padding:30px 55px;

  • top and bottom paddings are 30px
  • right and left paddings are 55px

padding:25px;

  • all four paddings are 25px

Padding example program:

[pastacode lang=”css” manual=”%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Adiv.wiki%0A%7B%0Awidth%3A200px%3B%0Aborder-style%3A%20solid%3B%0Aborder-width%3Athin%3B%0Aborder-color%3A%23000%3B%0Apadding%3A30px%2020px%2010px%2025px%3B%0A%7D%0A%3C%2Fstyle%3E%0A%3Cdiv%20class%3D%E2%80%9Cwiki%22%3E%0AWelcome%20to%20Wikitechy..%0A%3C%2Fdiv%3E%0A” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]

margin Property:

  • CSS margin properties define the space around elements.
  • The margin clears an area around an element (outside the border).
  • The margin does not have a background color, and is completely transparent.

You can define the element margin values the following way:

  • margin-top:100px;
  • margin-bottom:100px;
  • margin-right:50px;
  • margin-left:50px;

You can also use the shortand property:

margin:35px 60px 85px 110px;

top margin is 35px
right margin is 60px
bottom margin is 85px
left margin is 110px

margin:35px 60px 85px;
top margin is 35px
right and left margins are 60px
bottom margin is 85px

margin:35px 60px;
top and bottom margins are 35px
right and left margins are 60px

margin:25px;
all four margins are 25px

Margin Example Program:

[pastacode lang=”css” manual=”%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Adiv.wiki%0A%20%20%7B%0A%20%20%20%20%20%20width%3A200px%3B%0A%20%20%20%20%20%20border-style%3A%20solid%3B%0A%20%20%20%20%20%20border-width%3Athin%3B%0A%20%20%20%20%20%20border-color%3A%23000%3B%0A%20%20%20%20%20margin%3A30px%2020px%2010px%2025px%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%3Cdiv%20class%3D%E2%80%9Cwiki%22%3E%0A%09%20Welcome%20to%20Wikitechy..%0A%3C%2Fdiv%3E%0A” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]

Categorized in:

CSS

Tagged in:

, , , , , , , , , , , , , , , ,