Mô hình hộp: Margin CSS

Khoảng trống xung quanh viền của phần tử là margin. Thiết lập margin sẽ tạo ra thêm khoảng trống 'trống' xung quanh phần tử.

Cách đơn giản nhất để thiết lập margin là sử dụng thuộc tính margin, thuộc tính này chấp nhận bất kỳ đơn vị đo nào, phần trăm giá trị thập phân hoặc giá trị âm.

Thuộc tính margin CSS

Cách đơn giản nhất để thiết lập margin là sử dụng Thuộc tính margin.

Thuộc tính margin chấp nhận bất kỳ đơn vị đo nào, có thể là pixel, inch, mm hoặc em.

Giá trị margin có thể được thiết lập thành auto. Phương pháp phổ biến hơn là thiết lập giá trị độ dài cho margin. Đề xuất sau đây đặt khoảng trống 1/4 inch trên các cạnh của thẻ h1:

h1 {margin : 0.25in;}

Dưới đây là ví dụ cho việc định nghĩa các cạnh khác nhau của thẻ h1 với các giá trị margin khác nhau, đơn vị đo là pixel (px):

h1 {margin : 10px 0px 15px 5px;}

Tương tự như cách thiết lập lề trong, thứ tự của các giá trị này bắt đầu từ lề ngoài trên (top) và quay quanh yếu tố theo hướng kim đồng hồ:

margin: top right bottom left

Ngoài ra, bạn还可以 cho margin một giá trị phần trăm:

p {khoảng cách : 10%;}

Phần trăm là tính tương đối với width của yếu tố cha. Ví dụ trên này đặt lề ngoài của yếu tố p là 10% width của yếu tố cha.

Giá trị mặc định của margin là 0, vì vậy nếu không chỉ định một giá trị cho margin, sẽ không có lề ngoài. Tuy nhiên, trong thực tế, trình duyệt đã cung cấp một số phong cách mặc định cho nhiều yếu tố, lề ngoài cũng không ngoại lệ. Ví dụ, trong trình duyệt hỗ trợ CSS, lề ngoài sẽ tạo ra “hàng trống” trên và dưới mỗi yếu tố đoạn văn. Do đó, nếu không chỉ định lề ngoài cho yếu tố p, trình duyệt có thể tự động áp dụng một lề ngoài. Tất nhiên, nếu bạn đã đặc biệt chỉ định, sẽ thay thế phong cách mặc định.

Sao chép giá trị

Bạn còn nhớ không? Chúng ta đã đề cập đến việc sao chép giá trị trong hai phần trước. Dưới đây, chúng ta sẽ giải thích cách sử dụng sao chép giá trị.

Đôi khi, chúng ta sẽ nhập một số giá trị trùng lặp:

p {khoảng cách: 0.5em 1em 0.5em 1em;}

Bằng cách sao chép giá trị, bạn không cần phải nhập lại cặp số này. Quy tắc trên bằng với quy tắc dưới đây:

p {khoảng cách: 0.5em 1em;}

Cả hai giá trị này có thể thay thế cho bốn giá trị trước đó. Làm thế nào để làm được điều đó? CSS định nghĩa một số quy tắc cho phép chỉ định ít hơn bốn giá trị cho lề ngoài. Quy tắc như sau:

  • Nếu thiếu giá trị của lề ngoài trái, thì sử dụng giá trị của lề ngoài phải.
  • Nếu thiếu giá trị của lề ngoài dưới, thì sử dụng giá trị của lề ngoài trên.
  • Nếu thiếu giá trị của lề ngoài phải, thì sử dụng giá trị của lề ngoài trên.

Hình ảnh dưới đây cung cấp phương pháp trực quan hơn để hiểu điều này:

CSS Giá trị sao chép

Ng换句话说, nếu đã chỉ định 3 giá trị cho lề ngoài, thì giá trị thứ 4 (tức là lề ngoài trái) sẽ được sao chép từ giá trị thứ 2 (lề ngoài phải). Nếu đã có hai giá trị, giá trị thứ 4 sẽ được sao chép từ giá trị thứ 2, giá trị thứ 3 (lề ngoài dưới) sẽ được sao chép từ giá trị thứ 1 (lề ngoài trên). Trong trường hợp cuối cùng, nếu chỉ có một giá trị, thì ba lề ngoài còn lại đều được sao chép từ giá trị này (lề ngoài trên).

Sử dụng cơ chế đơn giản này, bạn chỉ cần chỉ định các giá trị cần thiết, không cần phải áp dụng tất cả 4 giá trị, ví dụ:

h1 {khoảng cách: 0.25em 1em 0.5em;}	/* Bằng với 0.25em 1em 0.5em 1em */
h2 {khoảng cách: 0.5em 1em;}		/* Bằng với 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* Bằng 1px 1px 1px 1px */

Cách này có một nhược điểm nhỏ, bạn cuối cùng sẽ gặp vấn đề này. Giả sử bạn muốn đặt lề trên và lề bên trái của phần tử p là 20 pixel, lề dưới và lề phải là 30 pixel. Trong trường hợp này, bạn phải viết:

p {margin: 20px 30px 30px 20px;}

Bạn sẽ nhận được kết quả mong muốn. Thật đáng tiếc, trong trường hợp này, số lượng giá trị cần thiết không thể ít hơn.

Xem thêm một ví dụ khác. Nếu bạn muốn tất cả các lề ngoài trừ lề bên trái đều là auto (lề bên trái là 20px):

p {margin: auto auto auto 20px;}

Cũng vậy, bạn sẽ nhận được hiệu ứng mong muốn. Vấn đề là việc nhập những auto này có thể hơi phức tạp. Nếu bạn chỉ muốn kiểm soát lề cạnh đơn của phần tử, hãy sử dụng thuộc tính lề cạnh đơn.

Thuộc tính lề cạnh đơn

Bạn có thể sử dụng thuộc tính lề cạnh đơn để đặt giá trị lề cho cạnh đơn của phần tử. Giả sử bạn muốn đặt lề bên trái của phần tử p là 20px. Bạn không cần sử dụng margin (cần nhập nhiều auto), mà có thể sử dụng phương pháp sau:

p {margin-left: 20px;}

Bạn có thể sử dụng bất kỳ thuộc tính nào sau để chỉ đặt lề bên trên mà không ảnh hưởng đến tất cả các lề khác:

Một quy tắc có thể sử dụng nhiều thuộc tính cạnh đơn như vậy, ví dụ:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

Tất nhiên, trong trường hợp này, sử dụng margin có thể dễ dàng hơn:

p {margin: 20px 30px 30px 20px;}

Dù sử dụng thuộc tính cạnh đơn hay sử dụng margin, kết quả đều như nhau. Thường thì, nếu bạn muốn đặt lề cho nhiều cạnh, sử dụng margin sẽ dễ dàng hơn. Tuy nhiên, từ góc độ hiển thị tài liệu, thực tế sử dụng phương pháp nào cũng không quan trọng, vì vậy bạn nên chọn phương pháp dễ dàng hơn đối với bạn.

Lưu ý và chú thích

Lưu ý:Netscape và IE định nghĩa giá trị mặc định của lề (margin) cho thẻ body là 8px. Còn Opera không phải vậy. Ngược lại, Opera định giá trị mặc định của độ lấp đầy bên trong (padding) là 8px, vì vậy nếu bạn muốn điều chỉnh phần viền của toàn bộ trang web và hiển thị đúng trên Opera, bạn phải tùy chỉnh padding của body.

Mẫu CSS lề ngoài

Đặt lề bên trái của văn bản
Ví dụ này演示 cách đặt margin trái văn bản.
Đặt margin phải văn bản
Ví dụ này演示 cách đặt margin phải văn bản.
Đặt margin trên văn bản
Ví dụ này演示 cách đặt margin trên văn bản.
Đặt margin dưới văn bản
Ví dụ này演示 cách đặt margin dưới văn bản.
Tất cả các thuộc tính margin trong một tuyên bố.
Ví dụ này演示 cách đặt tất cả các thuộc tính margin trong một tuyên bố.

Thuộc tính margin CSS

Thuộc tính Mô tả
margin Thuộc tính viết tắt. Đặt tất cả các thuộc tính margin trong một tuyên bố.
margin-bottom Đặt margin dưới bên ngoài của phần tử.
margin-left Đặt margin bên trái của phần tử.
margin-right Đặt margin bên phải của phần tử.
margin-top Đặt margin trên bên ngoài của phần tử.