Concept

margin is a CSS property used to create space between elements.

margin has multiple implementations, for example:

• margin: 10px means the overall distance around the element is 10px.
• margin: 10px 20px means the top/bottom distance is 10px and the left/right distance is 20px.
• margin: 10px 20px 30px means the top distance is 10px, left/right distance is 20px, and bottom distance is 30px.
• margin: 10px 20px 30px 40px means the top distance is 10px, right distance is 20px, bottom distance is 30px, and left distance is 40px.

We can also set separate distances for each direction using:

• margin-top
• margin-right
• margin-bottom
• margin-left

Usage

Example

HTML

<h1>Hello<h1>
<p>Everyone</p>

CSS

h1 {
  margin: 20px;
  background: lightcoral;
}

Result

Experience