Home

Common CSS Properties: Padding & Margins

Padding Properties

Name Code Property Description Example Code
Padding padding Sets padding on all four sides of an element clockwise (top, right, bottom, left) padding: 10px 20px 30px 40px
Sets padding on all four sides of an element using axes (vertical, horizontal) or all at once padding: 5% 20% or padding: 10px
Left Padding padding-left Sets padding on the left side of an element only padding-left: 10px
Right Padding padding-right Sets padding on the right side of an element only padding-right: 20px
Top Padding padding-top Sets padding on the top side of an element only padding-top: 10%
Bottom Padding padding-bottom Sets padding on the bottom side of an element only padding-bottom: 30px
Padding Block padding-block Defines the logical block start and end (or top and bottom) padding of an element regardless of orientation. padding-block: 10px 20px
Padding Inline padding-inline Defines the logical inline start and end (or left and right) padding of an element regardless of orientation. padding-inline: 40px 50%
Note: Percentages refer to the percentage of the page that scales relative to the current size of the window.

Margin Properties

Name Code Property Description Example Code
Margin margin Sets margins on all four sides of an element (in order: top, right, bottom, left) margin: 10px, 20px, 30px, 40px
Sets padding on all four sides of an element using axes (vertical, horizontal) or all at once margin: 10% 50px or margin: auto
Left Margin margin-left Sets margin on the left side of an element only margin-left: 10px
Right Margin margin-right Sets margin on the right side of an element only margin-right: 20px
Top Margin margin-top Sets margin on the top side of an element only margin-top: 100px
Bottom Margin margin-bottom Sets margin on the bottom side of an element only margin-bottom: 30px
Margin Block margin-block Defines the logical block start and end (or top and bottom) margin of an element regardless of orientation. margin-block: 10% 20px
Margin Inline margin-inline Defines the logical inline start and end (or left and right) margin of an element regardless of orientation. margin-inline: 40px 20px
Note: Percentages refer to the percentage of the page that scales relative to the current size of the window.
Note 2: the keyword auto can also be used to automatically select a suitable margin. In some cases it can be used to center an element. This table uses this.

Common Units of Measurement

Code Description
px Pixels. Relative to the size of the screen.
em Relative to the font size. May be different depending on the element.
rem Relative to the font size of the root element of the document. Same for all elements.