div{padding-top:50px;padding-right:30px;padding-bottom:50px;padding-left:80px;}/* You can also write above code in one line */div{padding:50px30px50px80px;/* top right bottom left; (moving clockwise) */}
padding:5px10px15px20px; //top right bottom left
padding:10px20px;//top & bottom then left & right
padding-top:5px; //just top padding
padding-right:10px; //just right padding
padding-bottom:15px; //just bottom padding
padding-left:20px; //just left padding
Padding is the defined space around an element
/* Here is how it works */padding:10px;/* for all sides i.e. top, bottom, right, left */padding:10px5px;/* top & bottom , right & left */padding:10px5px15px;/* top, right & left, bottom */padding:10px5px15px20px;/* top, right, bottom, left */(clockwide-rotation)/* Each side can be defined individually */padding-top:10px;padding-right:5px;padding-bottom:15px;padding-left:20px;
/* Apply to all four sides */padding:1em;/* vertical | horizontal */padding:5%10%;/* top | horizontal | bottom */padding:1em2em2em;/* top | right | bottom | left */padding:5px1em02em;/* Global values */padding: inherit;padding: initial;padding: revert;padding: revert-layer;padding: unset;
Syntax:padding: top, right, bottom, left;Example:padding:10px15px20px25px;/*What it means*/
padding from top 10px
padding from right 15px
padding from bottom 20px
padding from left 25px
An element's padding area is the space between its content and its border. Note: Padding creates extra space within an element. In contrast, margin creates extra space around an element.