space_bar
Margin
Invisible space around your box that pushes other elements away
add
Positive values
remove
Negative values
expand
Outside border
/* Shorthand */
margin: 10px 20px 15px 5px;
/* Longhand */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;
margin: 10px 20px 15px 5px;
/* Longhand */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;
padding
Padding
Space between border and content area where background shows through
add
Positive values only
format_color_fill
Background visible
compress
Inside border
/* Shorthand */
padding: 25px 15px;
/* Longhand */
padding-top: 25px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 15px;
padding: 25px 15px;
/* Longhand */
padding-top: 25px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 15px;
visibility
Visual Examples
Margin Example
margin: 20px
Content
Padding Example
padding: 20px
Content
compare
Margin vs Padding
| Property | Margin | Padding |
|---|---|---|
| Location | Outside border | Inside border |
| Background | Not visible | Element background |
| Values | Positive & Negative | Positive only |
| Effect | Pushes other elements | Internal spacing |