Shorthand Margin and Padding

Contact Us or call 1-877-932-8228
Shorthand Margin and Padding

Shorthand Margin and Padding

The margin and padding shorthand properties interpret values in the same way:

  • One value: sets all four sides uniformly.
  • Two values: first value sets top and bottom, second value sets right and left.
  • Three values: first value sets top, second value sets both right and left, third value sets bottom.
  • Four values: sets the top, right, bottom and left, respectively.
selector {
	padding: AllSides;
}
selector {
	padding: TopAndBottom RightAndLeft;
}
selector {
	padding: Top RightAndLeft Bottom;
}
selector {
	padding: Top Right Bottom Left;
}

The initial value for each margin and padding property is 0.

The following example demonstrates how you can use the shorthand properties for padding:

Code Sample:

CssShorthand/Demos/Padding.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Margin and Padding Shorthand</title>
<style type="text/css" media="screen">
div {
	border: 1px solid black;
	margin: .75em;
}

div.one {
	padding: 1em; /* sets the top, right, bottom and left padding to 1em. */
}

div.two {
	padding: 1em 2em; /* sets the top and bottom to 1em and the right and left padding to 2em. */
}

div.three {
	padding: 1em 2em 3em; /* sets the top to 1em, right and left to 2em, and bottom to 3em. */
}

div.four {
	padding: 1em 2em 3em 4em; /* sets the top to 1em, right to 2em, bottom to 3em, and left to 4em. */
}
</style>
</head>

<body>
	<div class="one">One value set: A <code>padding</code> value of 1em for all four sides.</div>
	
	<div class="two">Two values set: A <code>padding</code> value of 1em for the top and bottom, 2em for right and left.</div>
	
	<div class="three">Three values set: A <code>padding</code> value of 1em for the top, 2em for right and left, 3em for bottom.</div>
	
	<div class="four">Four values set: A <code>padding</code> value of 1em for the top, 2em for the right, 3em for the bottom, 4em for the left.</div>
</body>
</html>

Code Explanation

The above code will render the following:Screen capture: The padding property values

Next