css padding
padding: 5px 10px 15px 20px; //top right bottom left padding: 10px 20px;//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
css padding syntax
/* Apply to all four sides */ padding: 1em; /* vertical | horizontal */ padding: 5% 10%; /* top | horizontal | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 5px 1em 0 2em; /* Global values */ padding: inherit; padding: initial; padding: revert; padding: revert-layer; padding: unset;
Source: developer.mozilla.org
padding css
padding:10px 5px 15px 20px; means top padding is 10px right padding is 5px bottom padding is 15px left padding is 20px
css padding
padding: 5px 10px 15px; //top then left & right then bottom
css padding
padding: 1%; // scales proportionally - on ALL sides
padding
padding: <padding-top> || <padding-right> || <padding-bottom> || <padding-left> /* shorthand padding*/ .box { padding: 20px; } /* The same padding written longhand */ .box { padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; }