Box formatting properties

The CSS box model describes the rectangular boxes that are generated for elements in the document tree. Each box contains a content area that is optionally surrounded by a border. The padding is the distance between the content perimeter and the border while the margin is the distance between the border and the box perimeter. The most important box formatting properties include:

• margin: this property specifies the distance between the box perimeter and the border. The related properties margin-top, margin-bottom, margin-right, and margin-left specify the margins for the corresponding edges. Here is how to use these properties. The rule:

  story {margin: 1em;}
  

  is equivalent to:

  story {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    margin-right: 1em;
  }
  

  The rule:

  story {margin: 1em 2em;}
  

  is equivalent to:

  story {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 2em;
    margin-right: 2em;
  }
  

  The rule:

  story {margin: 1em 2em 3em 4em;}
  

  is equivalent to:

  story {
    margin-top: 1em;
    margin-right: 2em;
    margin-bottom: 3em;
    margin-left: 4em;
  }
  

• padding: this property specifies the distance between the border and the content perimeter. The related properties padding-top, padding-bottom, padding-right, and padding-left specify the paddings for the corresponding edges. The use of these properties is as for the margin property.
• border: this property is a shorthand for the width, style, and color properties (in this order) of the four borders. Width, style, and color can be specified for the four sides with the properties border-top, border-bottom, border-right, and border-right. Width, style, and color can also be fixed with the following properties:
  • border-width: this property specifies the width of the border. The possible values are thin, medium (default), thick, or a length unit. The border-width property acts as a shorthand for the four properties border-top-width, border-bottom-width, border-right-width, and border-left-width as described for the margin property.
  • border-style: this property specifies the style of the border. Some possible values are solid, dotted, dashed. The border-style property acts as a shorthand for the four properties border-top-style, border-bottom-style, border-right-style, and border-left-style as described for the margin property.
  • border-color: this property specifies the color of the border. The border-color property acts as a shorthand for the four properties border-top-color, border-bottom-color, border-right-color, and border-left-color as described for the margin property.
  Here are some examples. This rule formats all borders as thin, solid, and black:

  story {border: thin solid black;}
  

  This other rule formats the top border as medium, solid, and yellow, the right border as thin, solid, and red, the bottom border as medium, solid, and blue, and the left border as thin, solid, and green:

  story {
    border-width: medium thin; 
    border-style: solid; 
    border-color: yellow red blue green;
  }
  

• width: it specifies the width of the box content for block-level elements. The properties min-width and max-width allow authors to constrain box widths to a certain range. The width of an inline element's box is that of the rendered content within it.
• height: it specifies the height of the box content for block-level elements. The properties min-height and max-height allow authors to constrain box heights to a certain range. The height of an inline element's box is determined by the line-height property.
• background: this property is a shorthand for the background properties of the box content. The most important background properties are background-color and background-image.