Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS Padding

Padding is the space between the content and the border of an element.

The padding property sets the space inside an element.

It specifies padding for all 4 sides of the element: top, right, bottom, and left.

Example

#

An <input> element with extra padding.

<input type="text" placeholder="Your email"
       style="padding: 15px;">

The padding shorthand property

The padding property sets the space between the element's content and its border.

The value can be set with any length value, such as, px, pt, cm, or percentage.

This property sets the spacing for all 4 sides of the element.

An element with padding on all 4 sides.

Element with 30px padding on all sides
<div style="padding:30px;
            border: 4px solid lightblue;
            background:aliceblue;">
  Element with 30px padding on all sides
</div>

For details on padding, see our CSS padding reference guide.

Multiple padding values

The following examples show padding accepting 4, 3, 2, and 1 values.

Padding with 4 values

And element with 4 padding values, one for each side.

Padding: top 20px, right 40px, bottom 60px, and left 80px
<style>
  .example1 {
    padding: 20px 40px 60px 80px;
    border: 5px solid lightblue;
    background-color: aliceblue;
  }
</style>

<div class="example1">
  Padding: top 20px, right 40px,
  bottom 60px, and left 80px
</div>


Padding with 3 values

An element with 3 padding values for top, right, bottom, and left the same as right.

Padding: top 20px, right 40px, bottom 60px, and left 40px
<style>
  .example1 {
    padding: 20px 40px 60px;
    border: 5px solid lightblue;
    background-color: aliceblue;
  }
</style>

<div class="example2">
  Padding: top 20px, right 40px,
  bottom 60px, and left 40px
</div>


Padding with 2 values

An element with 2 padding values for top and bottom, and right and left.

Padding: top 20px, right 40px, bottom 20px, and left 40px
<style>
  .example2 {
    padding: 20px 40px;
    border: 5px solid lightblue;
    background-color: aliceblue;
  }
</style>

<div class="example2">
  Padding: top 20px, right 40px,
  bottom 20px, and left 40px
</div>


Padding with 1 value

An element with 1 padding value for all sides.

Padding: top 40px, right 40px, bottom 40px, and left 40px
<style>
  .example4 {
    padding: 40px;
    border: 5px solid lightblue;
    background-color: aliceblue;
  }
</style>

<div class="example4">
  Padding: top 40px, right 40px,
  bottom 40px, and left 40px
</div>

Padding and Element Width

The CSS width property specifies the element's content area width.
When a padding value is used on an element, it is added to the element's width.

The element below has a total width of 340px (300px + 2 x 20px).

This element is 340px wide
<style>
  .element1 {
    width: 300px;
    padding: 20px;
    border: 4px solid steelblue;
  }
</style>

<div class="element1">
  This element is 340px wide
</div>

To maintain the element's width regardless of the padding values, use the box-sizing property. This element is 300px wide, unaffected by the padding values.

This element is 300px wide
<style>
  .element2 {
    width: 300px;
    padding: 20px;
    border: 4px solid steelblue;
    box-sizing: border-box;
  }
</style>

<div class="element2">
  This element is 300px wide
</div>

Set Individual Sides Padding

Padding values can also be set for each side with these properties:

They accept any valid length value, such as, px, em, cm, and %.

An element with 4 padding properties, one for each side.

Padding: top 60px, right 10px, bottom 30px, and left 50px
<style>
  .individual {
    padding-top: 60px;
    padding-right: 10px;
    padding-bottom: 30px;
    padding-left: 50px;
    border: 4px solid steelblue;
    background-color: aliceblue;
  }
</style>

<div class="individual">
  Padding:
  top 60px, right 10px,
  bottom 30px, and left 50px
</div>

Padding Properties


Property Description
padding A shorthand for setting all padding properties
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides