CSS Box Model

In the above example,

• Content part has an image and text.
• Background color has been applied.

In the above example,

• Around content, padding space 20px is added to all four sides.

In the above example,

• With padding, border width 1px, border style Solid and border color Red are applied.

In the above example,

• With padding and border, margin bottom -8px is applied here. Margin property centered the image.

When vertical margins of two elements touch, margin collapse happens (both margins are not applied/honored as specified). Details are explained below.

• If one element vertical margin height is greater than other, greater vertical margin height is only applied (10px 20px -> 20px).
• If both vertical margin heights are same, one vertical margin height is only applied (10px, 10px -> 10px).
• If one element vertical margin height has positive value (ex: 30px) and another vertical margin height is negative value (ex: -10px) then addition of both values is (30px + (–10px) = 20px) applied.
• If both elements vertical margin heights are negative then greater negative vertical margin height is only applied (-10px, -20px -> -20px).

In the above example,

• Here, margin top (margin-top:0;) and margin bottom (margin-bottom:0;) values set to 0. Margin right (margin-right:auto) and margin left (margin-left:auto) values set to auto.
• P element width is set to 600px. P element is centered based on remaining available space.

• Auto margin can be applied only to block-level elements (ex: <div>, <p>, <pre>, <h1>,<h2>,<ul>,<ol>) .
• Using margin:auto property, element can horizontally only centered.
• Auto margin property can not be applied to inline elements (ex: <a>, <span>, <img>, <i>).
• Auto margin property can not be applied to absolutely positioned block-level elements (ex: position:absolute;).
• Auto margin property can not be applied to float property with value left/right (ex: float:left;) applied block-level elements.

• If no padding is declared, then browser specific default padding is applied to an element. Default padding is mostly 0 or very negligible amount.

  p {
      /*padding:10px;*/
      border:1px solid red;
      margin:20px;
     }
  

• If no border style is specified, then no border style(border-style:none) is applied to an element by default.

  p {
      padding:10px;
      /*border:1px solid red;*/
      margin:20px;
     }
  

• If no margin is declared, then browser specific default margin is applied to an element. Default margin is mostly 0 or very negligible amount.

  p {
      padding:10px;
      border:1px solid red;
      /*margin:20px;*/
     }

• If no width is specified to block-level element, then block-level element takes 100% width by default.

  p {
      border:1px solid red;
      /*width:150px;*/
     }

• Block-level element and inline element take only required height space based on content size by default.

  

• Inline element takes only required width based on content size.

  

• Width and height properties are not applicable to inline elements but applicable to block-level elements.

  p {
      border:1px solid red;
      width:150px;
      height:60px;
    }
  
  span {
      border:1px solid red;
      width:150px;  /*Not applicable*/
      height:60px; /*Not applicable*/
    }

  <p>Block level element</p>
  <span>Inline element</span>

  

• There is no direct way to apply color to element’s margin space.
• Parent element background color is applied to child element margin space by default.
• When apply a background color to a parent element then by default the same background color applies to child element’s content, padding and margin also. Here when parent element has background color then child element margin also gets parent element color.

  div { 
      background-color:orange;
      height:100px;
      width:250px;
      border:1px solid red;
      margin:20px;
      }
  
   p {
      height:50px;
      width:100px;
      border:1px solid green;
      margin:20px;
      }

  <div>DIV element
      <p>P element</p>
  </div>

  

• When apply a background color to an element, the same color also applies to padding space but not to margin space. Here margin is still transparent.

  div {
      background-color:orange;
      height:50px;
      width:250px;
      border:1px solid red;
      margin:30px;
      }

  <div>
      DIV element
  </div>

  

  Note:Outside border is manually added to show the margin space area.

• Longhand padding property syntax start with padding-xxx:<value>.

  p {
      padding-top:20px;
  }

• Longhand margin property syntax start with margin-xxx:<value> (ex: margin-top:10px).

  p {
      margin-top:10px;
  }

• Longhand border property syntax start with border-xxx:<value>.

  p {
      border-color:red;
  }

• Better to use shorthand properties if possible.

  p {
      border:1px solid green;
  }

• Be aware of vertical margin collapse.
• Based on different browser (Chrome/IE/Firefox/etc.,), padding/border/margin outputs could be little different.
• Users can go for available browser specific properties if need.

  For Chrome, it starts with “-webkit-“

  For IE, it starts with “-ms-“

  For Firefox, it starts with “-moz-“

  p {
      border-radius:74px 74px 74px 74px;
      -webkit-border-radius: 74px 74px 74px 74px;
      -moz-border-radius:74px 74px 74px 74px;
      -ms-overflow-style:scrollbar;
    }