DevTut

# Padding

# Padding Shorthand

The padding property sets the padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.

To save adding padding to each side individually (using padding-top, padding-left etc) can you write it as a shorthand, as below:

Four values:

<style>
    .myDiv {
        padding: 25px 50px 75px 100px; /* top right bottom left; */
    }
</style>
<div class="myDiv"></div>

enter image description here (opens new window)

Three values:

<style>
    .myDiv {
        padding: 25px 50px 75px; /* top left/right bottom */
    }
</style>
<div class="myDiv"></div>

enter image description here (opens new window)

Two values:

<style>
    .myDiv {
        padding: 25px 50px; /* top/bottom left/right */
    }
</style>
<div class="myDiv"></div>

enter image description here (opens new window)

One value:

<style>
    .myDiv {
        padding: 25px; /* top/right/bottom/left */
    }
</style>
<div class="myDiv"></div>

enter image description here (opens new window)

# Padding on a given side

The padding property sets the padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.

You can specify a side individually:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

The following code would add a padding of 5px to the top of the div:

<style>
.myClass {
    padding-top: 5px;
}
</style>

<div class="myClass"></div>

# Syntax

  • padding: length|initial|inherit|unset;
  • padding-top: length|initial|inherit|unset;
  • padding-right: length|initial|inherit|unset;
  • padding-bottom: length|initial|inherit|unset;
  • padding-left: length|initial|inherit|unset;

# Remarks

The padding property sets the padding space on all sides of an element. The padding area is the space between the content of the element and its border. **Negative values are not allowed**.

1 (opens new window): https://developer.mozilla.org/en/docs/Web/CSS/padding (opens new window) MDN

Also see this question (opens new window), "Why does CSS not support negative padding?" (opens new window) and his answers.

Also please consider The Box Model (opens new window) when using padding. Depending on the box-sizing value, padding on an element can either add to the previously defined height/width of an element or not.

Related Properties:

margin (opens new window)

Padding on inline elements will only apply to the left and right of the element, and not the top and bottom, due to the inherent display properties of inline elements.

← Border →