CSS Padding - CSS Padding Shorthand Property

CSS Padding property leave blank space around the element content (inside of border). You can also write CSS padding shorthand property.

CSS Padding property support pixel, percentage or auto value.

Properties Value Description
padding px
%
auto		 User define pixel value.
User define percentage value.
Set automatic.
padding-left px
%
auto		 padding left side set define pixel value.
padding left side set User define percentage value.
padding left side Set automatic.
padding-right px
%
auto		 padding right side set User define pixel value.
padding right side set User define percentage value.
padding right side set Set automatic.
padding-top px
%
auto		 padding top set user define pixel value.
padding top set user define percentage value.
padding top set automatic.
padding-bottom px
%
auto		 padding bottom set user define pixel value.
padding bottom set user define percentage value.
padding bottom set automatic.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS padding property</title>
  <style type="text/css">
    p.first {
      border: 1px solid orange;
      padding-left: 30px;
    }
    p.second {
      border: 1px solid orange;
      padding-left: 20%;
    }
    p.third {
      border: 1px solid orange;
      padding-left: auto;
    }
  </style>
</head>
<body>
  <p class="first">This element set padding-left, border width, border color, border style CSS properties.</p>

  <p class="second">This element set padding-left, border width, border color, border style CSS properties.</p>

  <p class="third">This element set padding-left, border width, border color, border style CSS properties.</p>
</body>
</html>

Run it...   »

CSS Padding shorthand property

CSS padding property write in shorthand way including following padding properties:

  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left

Margin value how to set

Value Description
padding: 12px; all 4 side padding 12 pixel.
padding: 10px 20px; top and bottom padding 10 pixel
right side and left side padding 20 pixel.
padding: 10px 20px 30px; top padding 10 pixel
left side and right side padding 20 pixel
bottom padding is 30 pixel.
padding: 10px 20px 30px 40px; top padding is 10 pixel
right side padding is 20 pixel
bottom padding is 30 pixel
left side padding is 40 pixel.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS padding property</title>
  <style type="text/css">
    p {
      border: 1px solid orange;
      padding: 25px 25px 5px 50px;
      width: 150px;
    }
  </style>
</head>
<body>
  <p class="first">This element set shorthand padding style property.</p>
</body>
</html>

Run it...   »