Home » CSS

Padding in CSS

Here, we are going to learn about the padding in CSS (Cascading Style Sheet), how to define and apply paddings on an object using CSS?
Submitted by Anjali Singh, on October 09, 2019

The padding property sets the padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.

padding in CSS

Syntax:

    element_name
    {
        padding: length|initial|inherit;
    }

Padding Shorthand

To add padding to each side individually (using padding-top, padding-left, etc) can you write it as a shorthand, as below:

Example (Four values):

<!DOCTYPE html>

<head>
    <style>
        .myDiv {
            /* top right bottom left; */
            padding: 25px 50px 75px 100px;
            /*background color*/
            background-color: #006969;
            /*text color*/
            color: #ffffff;
            /*width*/
            width: 300px;
        }
    </style>
</head>
<html>

<body>
<p class="myDiv">
This site is specially designed to provide help to students, 
working professionals and job seekers. We are fully dedicated to make each 
tutorial very simple to learn and understand. This site is not created for business purpose, 
but for spreading education about programming languages and to help the concerned learners 
out who are enthusiastic to learn new technologies.</p>
</body>

</html>

Output

Example of CSS padding

Here the padding is done is all directions with different value in each direction.

Example (Three values):

    .myDiv
    {
        /* top left/right bottom */ 
        padding: 25px 50px 75px; 
    } 

Example (Two values):

    .myDiv 
    {
        /* top/bottom left/right */
        padding: 25px 50px; 
    }

Example (One value):

    .myDiv {
        /* top/right/bottom/left */
        padding: 25px; 
    }

Here the padding is done in all four directions with same value.

Padding on a given side

You can specify a side individually,

  • Padding-top
  • Padding-right
  • Padding-bottom
  • Padding-left

Example:

<!DOCTYPE html>

<head>
    <style>
        .myDiv {
            padding-right: 25px;/* right ; */
            /*background color*/
            background-color: #006969;
            /*text color*/
            color: #ffffff;
            /*width*/
            width: 300px;
        }
    </style>
</head>
<html>

<body>
<p class="myDiv">
This site is specially designed to provide help to students, 
working professionals and job seekers. We are fully dedicated to make each 
tutorial very simple to learn and understand. This site is not created for business purpose, 
but for spreading education about programming languages and to help the concerned learners 
out who are enthusiastic to learn new technologies.</p>
</body>

</html>

Output

Example of CSS padding

The above code would add a padding of 25px to the right of the paragraph.






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.