Padding
Padding creates space inside an element, between its content and its border.
Padding Example: 8px for outside blue (the lighter one #BBDEFB), 2px for inside blue (lilbit darker one #64B5F6). Applied to all sides (top, right, bottom, left)
More Example: (Background color Green for this section: #81C784)
No Padding
Padding 4px all sides
Padding 8px all sides
Padding 12px all sides
You can also control padding on specific sides:
Padding Top: 4px, Padding Bottom: 8px, Padding Left: 2px, Padding Right: 6px. Background Color yellow for this section: #FFF9C4
Margin
Margin creates space outside an element, separating it from other elements.
Margin Example (8px on the outer container). Background color Red for this section: #E57373
More Example: (Background color Purple for this section: #BA68C8)
No Margin
Margin 5px all sides
Margin 10px all sides
Margin 20px all sides
You can also control margin on specific sides:
Margin Top: 10px, Margin Bottom: 40px, Margin Left: 20px, Margin Right: 8px. Background color: #9FA8DA
Use margin-left: auto; and margin-right: auto; to horizontally center block-level elements:
Centered Element (margin-left: auto; and margin-right: auto;) - Background color: #80CBC4
Border Width
Border with controls the thickness of the border around an element.
Default Border (Border Width: 1px)
No Border (Border Width: 0px)
Thin Border (Border Width: 2px)
Medium Border (Border Width: 4px)
Thick Border (Border Width: 8px)
You can also control border width on specific sides (though less common for just width):
Top Border (Border Top Width: 4px, Border Color: #2196F3)
Bottom Border (Border Bottom Width: 8px, Border Color: #4CAF50)
Left Border (Border Left Width: 2px, Border Color: #FFEB3B)
Right Border (Border Right Width: 6px, Border Color: #F44336)