Khái niệm

margin là một thuộc tính trong CSS được sử dụng để tạo khoảng cách giữa các khối.

margin có nhiều cách triển khai, ví dụ:

• margin : 10px nghĩa là khoảng cách chung quanh khối là 10px
• margin : 10px 20px nghĩa là khoảng các top/bottom là 10px và khoảng cách left/right là 20px
• margin : 10px 20px 30px nghĩa là khoảng cách top là 10px, khoảng cách left/right là 20px và khoảng cách bottom là 30px
• margin : 10px 20px 30px 40px nghĩa là khoảng cách top là 10px, right là 20px, bottom là 30px và right là 40px.

Ta còn có thể thiết lập khoảng cách riêng biệt cho một hướng bằng cách sử dụng:

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

Cách sử dụng

Ví dụ

HTML

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

CSS

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

Kết quả

Trải nghiệm