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 paddingpadding:10px 5px 15px 20px;
means
top padding is 10px
right padding is 5px
bottom padding is 15px
left padding is 20px/*
Padding block is analogous to padding-top and padding-bottom
in a horizontal writing mode. But it behaves like padding-left
and padding-right in a vertical writing mode.
Reference: https://codepen.io/wissamfawaz/pen/mdqgqgd
*/
.text {
background: #fff;
border: 3px dashed #ff7a18;
/* 20px will be added to top and bottom if text is horizontal
20px will be added to left and right if text is vertical
*/
padding-block: 20px;
}
.box {
padding: <padding-top> || <padding-right> || <padding-bottom> || <padding-left>
}padding: 15px 10px 20px;
Top padding is 15px
right and left padding are 10px
bottom padding is 20pxh4 {
background-color: green;
padding: 10px;
}
h3 {
background-color: blue;
padding: 10px 5%;
}