Padding

The padding property in CSS defines the innermost portion of the box model, creating space around an element's content, inside of any defined margins and/or borders.Padding values are set using lengths or percentages, and cannot accept negative values. The initial, or default, value for all padding properties is 0.

The property padding can take different values.

	.box {
	  padding: <padding-top> || <padding-right> || <padding-bottom> || <padding-left>
	}

	.box {
	  padding: 0 1.5em 0 1.5em; // Sets 0 on top side, 1.5em on right side, 0 on bottom side and 1.5em on left side.
	}

	.box{
		padding: 20px; // Sets padding to all four sides.
	}

	.box{
		padding: 20px 25px; // 20px for Top and Bottom side padding and 25px for Left and Right side padding
	}

	.box{
		padding: 10px 20px 30px; // 10px for top side, right and left side 20px and 30px for bottom side.
	}

Any of the individual padding properties can be declared using longhand, in which case you would define only one value per property. So the previous example could be rewritten as follows:

	.box {
	  padding-top: 20px;
	  padding-right: 20px;
	  padding-bottom: 20px;
	  padding-left: 20px;
	}