Lesson: HTML5 and CSS
Use Clockwise Notation to Specify the Padding of an Element
Instead of specifying an element's padding-top
, padding-right
, padding-bottom
, and padding-left
properties, you can specify them all in one line, like this:
padding: 10px 20px 10px 20px;
These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.
Use Clockwise Notation to give the ".green-box" class a padding
of 40px
on its top and left side, but only 20px
on its bottom and right side.
The content on this page is licensed under Attribution-ShareAlike 4.0 International. Original authors: freeCodeCamp, the content was modified.