Every html element is a box shape element.

Each box is surrounded by boundaries - `padding`, `border`, `margin`.

[![enter image description here](https://i.stack.imgur.com/o0En6.png)](https://i.stack.imgur.com/o0En6.png)

--

`margin` gives white space between two elements.

Why would a box require three boundaries? Would `margin` that creates white space between any two boxes do not suffice?