CSS Padding


Padding is the extra "white space" between the border and the content. A value is a numeric value or percentage of a floating-point number and a unit identifier, but can not be negative.

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

This example sets the padding 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 { padding: 5px 2px 5px 2px; }

Can be :

dev { padding: 5px 2px; }

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

The actual rules for assigning shorthand are:

  1. If the value of the lower padding is missing, the value of the upper padding is used
  2. If the value for the left padding is missing, the value for the right padding 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 padding for each orientation individually.

Padding is also a composite attribute

Value
padding-top
padding-right
padding-bottom
padding-left



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