CSS: Padding

Padding is the space between an element border and the content inside it.
Example1:


Button having padding 15 from top, right, left and bottom.

    // myprogrammingzone code
        
        

            Button having padding 15 from top, right, left and bottom.
    // myprogrammingzone code
    

Example 2:


Button having padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;

    // myprogrammingzone code
    
        Button having padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left:
        40px;
    // myprogrammingzone code
    

Example 3:


Button having padding-top: 10px; padding-right: 20; padding-bottom: 30px; padding-left: 40px;

    // myprogrammingzone code
    
        Button having padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;
    // myprogrammingzone code
    

There are four forms in which padding can be set which are explained below:

padding:10px 20px 30px 40px;

        padding-top: 10px
        padding-right: 20px
        padding-bottom: 30px
        padding-left: 40px;
    

padding:10px 20px 30px;

        padding-top: 10px
        padding-right: 20px
        padding-bottom: 30px
        padding-left: 20px;
    

padding:10px 20px;

        padding-top: 10px
        padding-right: 20px
        padding-bottom: 10px
        padding-left: 20px;
    

padding:10px;

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

Hope you will get the idea for padding very well.