The margin is responsible for space outside of the element's defined borders. It works like a safety bag and prevents elements from bumping into each other. Without margins, users would struggle to scan a page and find the necessary information.

For setting an element's margin, you can select a shorthand margin property and list in a clockwise order (starting from the top), all values separated by gaps, like in the example.

Remember to always define margin values. Usually, web developers use pixels.