CSS Building Blocks

Box Model

Every element in HTML is a rectangular box. And each box has a content area, margin area, padding area and border area. This system of margin, padding and borders surrounded by block level elements is known as CSS Box Model.

Margin

The margin property is used to set the margin between an HTML element and its neighbour. Margin property can be given in length, percentage or it can be auto. Auto value means that the browser will automatically set it for you. Margin property cannot be inherited from its parent. Margins can be set for top, right, left and bottom of an element. Full list of margin properties are as follows:

  • margin-top - sets the top margin of an element
  • margin-right - sets the right margin of an element
  • margin-bottom - sets the bottom margin of an element
  • margin-left - sets the left margin of an element
  • margin - its a shorthand property to set all values

Syntax for setting all margin properties:

div
{
    margin-top:10px;
    margin-right:20px;
    margin-bottom:20px;
    margin-left:10px;
}

You can also use shorthand property of margin to define margin for all sides of an element in just one line.

Syntax for using shorthand property of margin:

div
{
    margin: top right bottom left;
}

Padding

The padding property is used to set the distance between the border of an element and its content. Padding property can be given in length or percentage. Negative values are not allowed. Paddings can be set for top, right, left and bottom of an element. Full list of padding properties are as follows:

  • padding-top - sets the top padding of an element
  • padding-right - sets the right padding of an element
  • padding-bottom - sets the bottom padding of an element
  • padding-left - sets the left padding of an element
  • padding - its a shorthand property to set all values

Syntax for setting all padding properties:

div
{
    padding-top:10px;
    padding-right:20px;
    padding-bottom:20px;
    padding-left:10px;
}

You can also use shorthand property of padding to define padding for all sides of an element in just one line.

Syntax for using shorthand property padding:

div
{
    padding: top right bottom left;
}

Border

Border property is used to set the border of an HTML element. It can be set around all the sides of an element or can be specific. It can be of different colors, widths and styles. Full list of border properties are as follows:

  • border-top - sets the top border of an element
  • border-right - sets the right border of an element
  • border-bottom - sets the bottom border of an element
  • border-left - sets the left border of an element
  • border-style - sets the border style of an element.
    Possible values for border-style are none, dotted, dashed, solid, double, groove, ridge, inset and outset
  • border-color - sets the border color of an element
  • border-width - sets the border width of an element
  • border-top-width - sets only the top border width
  • border-right-width - sets only the right border width
  • border-bottom-width - sets only the bottom border width
  • border-left-width - sets only the left border width
  • border - its a shorthand property to set all properties

Syntax for setting all border properties:

div
{
    border-style:dotted;
    border-color:#F00;
    border-top-width:2px;
    border-right-width:4px;
    border-bottom-width:2px;
    border-left-width:4px;
}

You can also use shorthand property of border to set all properties, border-width, border-color, border-style in just one line.

p
{
    border: width style color;
}
<< Fonts Working with Background >>