What is the difference between Margin, Border, and Padding?
A margin refers to the area around the border, whereas padding refers to the area between an component's border and its content.
Use of Margin
- The margins allow the movement of the component; up or down, left or right. When margin value is set to auto, the component will be set in the centre when the page is in a fixed position.
- The margins set the whitespace. (Whitespace refers to spaces that have no characters, e.g. a tab)
- The margins allow the overlap of components with negative values.
Use of Padding
- The padding allows the addition of whitespace around the components and its border.
- The padding is able to alter the sizes of a component.
Use of Border
- Border is used to set a component's border. (Space around the component)
