HI WELCOME TO KANSIRIS

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.
PropertiesValueDescription
paddingpx
%
auto		User define pixel value.
User define percentage value.
Set automatic.
padding-leftpx
%
auto		padding left side set define pixel value.
padding left side set User define percentage value.
padding left side Set automatic.
padding-rightpx
%
auto		padding right side set User define pixel value.
padding right side set User define percentage value.
padding right side set Set automatic.
padding-toppx
%
auto		padding top set user define pixel value.
padding top set user define percentage value.
padding top set automatic.
padding-bottompx
%
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

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