Làm chủ kỹ thuật xuống dòng và tạo khoảng cách trong HTML

Trong soạn thảo văn bản thông thường, chúng ta hay dùng phím Enter để xuống dòng. Tuy nhiên, trong thiết kế web chuyên nghiệp, việc kiểm soát khoảng cách giữa các đoạn văn bằng mã Margin sẽ giúp giao diện tinh tế và chuẩn xác hơn rất nhiều.

1. Tại sao không nên lạm dụng thẻ ngắt dòng <br />?

Thẻ <br /> dùng để ngắt dòng đơn lẻ. Nếu bạn dùng quá nhiều thẻ này để tạo khoảng cách giữa các khối, bố cục sẽ dễ bị lỗi khi xem trên điện thoại. Thay vào đó, hãy sử dụng thẻ <div> kết hợp với Margin.

2. Kỹ thuật tạo khoảng cách bằng Margin

Mã Margin (lề bên ngoài) giúp bạn ấn định chính xác số Pixel (px) muốn cách ra giữa các khối nội dung.

• margin-top: Tạo khoảng cách phía trên.
• margin-bottom: Tạo khoảng cách phía dưới (Thường dùng nhất để đẩy khối tiếp theo xuống).

3. Các mẫu ứng dụng thực tế

Mẫu A: Khoảng cách sát (5px) – Dùng cho các nội dung có liên quan chặt chẽ.

Mẫu B: Khoảng cách vừa phải (15px – 20px) – Đây là tiêu chuẩn vàng cho các bài viết học thuật hoặc thẻ ghi chú.

4. Cách sửa mã nhanh

Để thay đổi khoảng cách, bạn chỉ cần tìm dòng chữ margin-bottom: ...px; và thay đổi con số:

• Muốn khít hơn: Giảm về 5px hoặc 8px.
• Muốn thoáng hơn: Tăng lên 25px hoặc 30px.

Lời khuyên: Hãy luôn thống nhất một con số Margin duy nhất cho toàn bộ danh sách để trang web của bạn trông gọn gàng và chuyên nghiệp nhất!