CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Padding - CSS Padding Shorthand Property


CSS Padding property leave blank space around the element content (inside of border).

CSS Padding property support pixel, percentage or auto value.

CSS Padding Properties

Property Value Description
padding px
%
auto
User define pixel value.
User define percentage value.
Set automatic.
padding-left px
%
auto
padding leftside set define pixel value.
padding leftside set User define percentage value.
padding leftside Set automatic.
padding-right px
%
auto
padding rightside set User define pixel value.
padding rightside set User define percentage value.
padding rightside 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 Code:

<body>
		<p style="padding-left:30px;border-style:solid;border-color:orange;"> This Paragraph is example of 
		the Left padding space use in CSS style can change a border color, border width or border style.</p>

		<p style="padding-left:20%;border-style:solid;border-color:orange;"> This Paragraph is example of 
		the Left padding space use in CSS style can change a border color, border width or border style.</p>

		<p style="padding-left:auto;border-style:solid;border-color:orange;"> This Paragraph is example of 
		the Left padding space use in CSS style can change a border color, border width or border style.</p>
</body>

Run it...   »

Example Result:

This Paragraph is example of the Left padding space use in CSS style can change a border color, border width or border style.


This Paragraph is example of the Left padding space use in CSS style can change a border color, border width or border style.


This Paragraph is example of the Left padding space use in CSS style can change a border color, border width or border style.


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

Padding value how to set

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

Example Code:

<body>
	<p style="border:1px solid orange;padding:25px 25px 5px 50px;width:300px;">This example is shorthand 
	padding style property value are allow to display results. border color orange and border style solid.</p>
</body>

Run it...   »

Example Result:

This example is shorthand padding style property value are allow to display results. border color orange and border style solid.