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:

<meta charset="UTF-8">
<title>CSS Margin and Padding Shorthand</title>
<style type="text/css" media="screen">
div {
	border: 1px solid black;
	margin: .75em;
} {
	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. */

	<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>

Code Explanation

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