Thiết lập Margin Space (Khoảng cách lề) quanh phần tử với CSS

Thuộc tính CSS margin được dùng để đặt vùng lề (margin area) quanh phần tử được chọn, xung quanh border của nó. Thuộc tính margin là shorthand cho margin-top, margin-right, margin-bottom, và margin-left.

Cú pháp

Selector {
  margin: /*value*/
}

Ví dụ 1: Margin với flex và float

<!DOCTYPE html>
<html>
<head>
<style>
  body * { display: flex; float: left; margin: 10px 15px; border: thin solid; text-align: center; width: 40%; border-radius: 5%; box-shadow: 0 0 4px 1px grey; }
  p { font-family: "Sim Sun", monospace; background-color: lightcyan; }
  div { font-family: Impact, cursive; background-color: lightgreen; }
</style>
</head>
<body>
  <p>First demo text</p>
  <div>A demo line goes like this..</div>
</body>
</html>

Kết quả

Ví dụ 2: Margin trên table

<!DOCTYPE html>
<html>
<head>
<style>
  table, table * { margin: 5% 30%; border: 12px double red; padding: 0.5rem; border-radius: 30px; }
  td:nth-child(even) { background-color: lightblue; }
  td:nth-child(odd) { background-color: lightgreen; }
</style>
</head>
<body>
  <table>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
  </table>
</body>
</html>

Kết quả

Margin vs Padding - nhớ dễ dàng:

• Margin = Ngoài viền (Outside border) - "Margin = Me" (ngoài)
• Padding = Trong viền (Inside border) - "Padding = People" (bên trong)

Margin không tác dụng lên:

• Inline elements (trừ inline-block, replaced elements như img) - chỉ margin-left/right
• Table rows (<tr>), row groups, columns, column groups - dùng border-spacing thay thế
• Phần tử con của flex/grid container (margin hoạt động nhưng không collapse)

Centering techniques với margin:

/* Horizontal center - block element có width */
margin-left: auto; margin-right: auto;
/* Hoặc shorthand */
margin: 0 auto;

/* Vertical + Horizontal center - absolute positioned */
position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;

/* Vertical center - flexbox (hiện đại) */
display: flex; align-items: center; justify-content: center;