Padding in CSS3

How to set the padding for an elements in CSS3?

Padding

Padding is used to set the space in an given element, There are different padding properties they are

padding-top
padding-bottom
padding-left
padding-right

Padding-top

Padding-top is used to create the space in the top

 <h2>Padding-top</h2>
    <p style="padding-top:20px;background-color:blue;color:white">Techfunda</p>

In the above code snippet we have padding-top which provides the space of 20 px in the top

output

Padding-left

It provides the space in the left side and move the text right side

 <h2>Padding-left</h2>
    <p style="padding-left:50px;background-color:greenyellow;color:hotpink">Techfunda</p>

Padding-left

In the above code snippet we have defined the padding left with the given space as 50px which moves the space from left to 50px right

output

Padding right

It provides the space to move the text left side

 <h2>Padding-right</h2>
    <p style="padding-right:500px;background-color:green;color:lime">TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here.</p>

Padding right

In the above code snippet we have defined the padding right with which moves the space towards 500px left

output

Padding bottom

It is used to create the space in the bottom of the element

 <h2>Padding-bottom</h2>
    <p style="padding-bottom:30px;background-color:green;color:lime">TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here.</p>

Padding bottom

In the above code snippet we have defined the padding bottom which moves the space towards 30px top

output

Padding

It creates the padding with all properties

<head>
    <title>CSS padding</title>
    <style>
        .class1 {
            color:blue;
            background-color:pink;
            border: 2px solid green;
            padding-top: 20px;
            padding-right: 50px;
            padding-bottom: 30px;
            padding-left: 40px;
        }
    </style>

</head>
<body>
<div class="class1">TechFunda is a free How to web technologies tutorials website.TechFunda is a free How to web technologies tutorials website. Enjoy your learning in How to manner that are based on real time problem solutions. If you have a how to problem to ask, please ask here. </div>  
</body>

Padding

In the above code snippet we have define the padding properties in the style sheet with the color, background color we have taken the .class1 to define the padding properties and we have div in the body and we have given class as .class1 to define the style properties.

output