LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » CSS Codes / HTML-CSS-PHP-JavaScript » PADDING: A CSS Property To Manage Your DIV Data.

PADDING: A CSS Property To Manage Your DIV Data.

PADDING: A CSS Property To Manage Your DIV Data.

The CSS Padding properties define the space between the element border and the element content.
Padding The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties.
A shorthand padding property can also be used, to change all paddings at once.CSS padding is a shorthand property that sets the padding around all four sides of the element. CSS padding can be applied to nearly every HTML tag (except for some table tags) and all four sides can have a different value.CSS padding can take any non-negative length value. Be sure to specify the measurement, such as px, pt, em, in, cm, etc. You can also specify a percentage for your padding, which will be a percentage of the width of the element’s containing block. This includes for top and bottom padding.

Some Rules:

1.) You Can Defines A Fixed Padding In Pixels, %, em, etc…
2.) No Negative Values Are Allowed.
3.) It’s Default value Is 0.
4.) This Is A CSS1 Version Code.
5.) It’s JavaScript Syntax Is: object.style.padding=”10px 5px”
6.) It Is Supported By All Major Browser Like IE, FireFox, Opera, Chrome And Safari With There Rules.

Recommended For You:
Secure Your WebPage From Being Iframed In Others Site

How To Add Padding To A DIV?

There are different ways to specify the padding property to a DIV, Here we have toppest and most used features with easy explanation.

If You Want To Add Same Value Of Padding To All Sides Of DIV, You Should Have To Use The Below Code:

padding-top:25px;
padding-bottom:25px;
padding-right:25px;
padding-left:25px;

But It Will Looks Like A Heavy Because It Has Four Link, So Minimized Your Padding Using Compressed Official Code. It Will Also Do The Work As Above.

padding:25px;

If You Want To Add Some PAdding In Different Value From Different Side, So Here Is Your Desire With All Four Sides Code With There Compressed Official Codes.

padding:25px 50px 75px 100px; 
The Above Code Have…
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px 

padding:25px 50px 75px;
The Above Code Have…
top padding is 25px
right and left paddings are 50px
bottom padding is 75px 

padding:25px 50px;
The Above Code Have…
top and bottom paddings are 25px
right and left paddings are 50px 

padding:25px;
all four paddings are 25px

How To Use It In CSS?

Just add the Padding code in your CSS desired tag like some of examples are below.

p{padding:25px;}
h1{padding:25px;}
h2{padding:25px;}
h3{padding:25px;}
span{padding:25px;}
div{padding:25px;}

Conclusion:

This tutorial has taught you how to add padding to control the style and layout of a div . You have learned how to use CSS to add and specify padding and elements and divs. You have also learned how to position a div. Now be with us to get more like this.

Recommended For You:
How To Resize An Image Using Pure Vanilla JavaScript In Aspect Ratio?

You Like It, Please Share This Recipe With Your Friends Using...

6 Responses to “PADDING: A CSS Property To Manage Your DIV Data.”

  1. Victor Noah says:

    Nice information! I always like to see anything related to “codes” and also to implement them. Job well done! Here’s my Blog: Softvie.com

  2. Barry Duddy says:

    I have seen fantastic blogs and I have seen not so fantastic blogs. This blog is very informative in many ways and certainloy ranks in the former category. Really appreciate the information your providing use avid readers!
    defensive driving course

  3. Anonymous says:

    I really like this tutorial because its explain me every corner of the padding property easily and briefly. Looking for other cds properties too.

Leave a Reply to Victor Noah Cancel reply

Your email address will not be published. Required fields are marked *