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>
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> 
No comments:
Post a Comment