CSS Margin


The margin is an extra "white space" outside the border, it is transparent and invisible. A value is a numeric value or percentage consisting of a floating-point number and a unit identifier.

dev {margin: 5px 2px 5px 2px;}

This example sets the margin of the div element from "up-right-down-left" to "5px 2px 5px 2px" in the order in which it starts clockwise from the top. If only one value is set, it is applied to the all edges.

The attribute can also take the value of "auto", this let the system assign the default value.


Assignment shorthand

dev { margin: 5px 2px 5px 2px; }

Can be :

dev { margin: 5px 2px; }

In this example, the value of the lower and right margins is missing, the system automatically uses the top margin value as the bottom margin value and the right margin value as the left margin.

The actual rules for assigning shorthand are:

  1. If the value of the lower margin is missing, the value of the upper margin is used
  2. If the value for the left margin is missing, the value for the right margin is used
  3. If only one value is given, the value is applied to each value

Composite attribute

This attribute is a composite attribute, and you can specify the margin for each orientation individually.

Numeric value or percentage consisting of a floating-point number and a unit identifier.

Value
margin-top
margin-right
margin-bottom
margin-left
Note

When you set the background attribute for an element, the background can not be laid out to the margin, but it can be padded to the padding.




Copyright 2014-2017 by DeveloperTut.com. All Rights Reserved.
TwitterGoogle+Facebook