Để giải quyết câu hỏi này, chúng ta cần hiểu về cách mà thuộc tính CSS margin được khai báo và sử dụng. Khi khai báo thuộc tính margin với ba giá trị như margin: 10px 20px 30px;, trình duyệt sẽ giải thích mỗi giá trị cho một hướng cụ thể như sau:

• margin-top: 10px - Khoảng cách từ phía trên của phần tử đến phần tử xung quanh là 10px.
• margin-right: 20px - Khoảng cách từ phía bên phải của phần tử là 20px.
• margin-bottom: 30px - Khoảng cách từ phía dưới của phần tử là 30px.
• margin-left: 20px - Do chỉ có ba giá trị, giá trị thứ hai (là 20px) sẽ được thiết lập cho margin-left.

Như vậy, khai báo này tác động đến bốn hướng của phần tử như trên. Dựa vào cách phân tích này, phương án B là chính xác.

Phương án B: margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 20px;

• Khái niệm về việc sử dụng margin với 3 giá trị trong CSS: Ghi nhớ rằng khi khai báo với 3 giá trị, giá trị thứ nhất áp dụng cho trên, giá trị thứ hai áp dụng cho cả phải và trái, giá trị thứ ba cho dưới.
• Cần phân biệt cách khai báo với 1, 2, 3, hoặc 4 giá trị:
  • 1 giá trị: Áp dụng cho tất cả các phía.
  • 2 giá trị: Áp dụng cho trên-dưới, phải-trái.
  • 3 giá trị: Áp dụng cho trên, phải-trái, dưới.
  • 4 giá trị: Áp dụng tương ứng cho trên, phải, dưới, trái.
• Trình duyệt không bỏ qua khai báo margin khi thiếu giá trị, nó sẽ áp dụng quy tắc như trên nếu chỉ có 3 giá trị được khai báo.