margin và padding khác nhau như thế nào?

Question

TuNhiemca · Accepted Answer

{"userId":5055811,"userName":"muối"}

Margin và Padding đều tạo ra khoảng trống xung quanh phần tử HTML, nhưng chúng khác nhau về vị trí và tác động:

Margin (Lề ngoài):

Là khoảng trống nằm bên ngoài đường viền (border) của phần tử.
Nó kiểm soát khoảng cách giữa phần tử này và các phần tử khác xung quanh nó.
Margin hoàn toàn trong suốt và không có màu nền.
Nó chấp nhận giá trị âm, cho phép các phần tử chồng lên nhau.
Thường được dùng để căn chỉnh vị trí các khối trên trang.

Padding (Đệm trong):

Là khoảng trống nằm bên trong đường viền (border), bao quanh nội dung (content) của phần tử.
Nó kiểm soát khoảng cách giữa nội dung và cạnh viền của chính phần tử đó.
Padding sẽ nhận màu nền của phần tử chứa nó.
Không chấp nhận giá trị âm.
Thường được dùng để tạo không gian thoáng đãng cho văn bản hoặc nội dung bên trong một hộp.

Timi · Answer

Margin và padding là hai thuộc tính quan trọng trong CSS dùng để tạo khoảng cách trong thiết kế giao diện web, nhưng chúng có sự khác biệt cơ bản như sau:

1. Margin (lề ngoài):
- Là khoảng cách giữa phần tử với các phần tử khác xung quanh nó.
- Tạo khoảng cách bên ngoài của phần tử.
- Không ảnh hưởng đến kích thước nội dung hoặc kích thước phần tử.
- Có thể có giá trị âm để kéo phần tử gần hơn với phần tử khác.

2. Padding (đệm trong):
- Là khoảng cách giữa nội dung của phần tử và viền (border) của phần tử đó.
- Tạo khoảng cách bên trong phần tử, giữa nội dung và viền.
- Ảnh hưởng đến kích thước tổng thể của phần tử (khi box-sizing là content-box).
- Không thể có giá trị âm.

Tóm lại:
- Margin tạo khoảng cách bên ngoài phần tử, tách phần tử ra khỏi các phần tử khác.
- Padding tạo khoảng cách bên trong phần tử, đẩy nội dung ra xa viền của phần tử.

Bạn cần thêm ví dụ hoặc cách sử dụng cụ thể không?

Quỳnh Anh Đặng · Answer

Margin

Là khoảng cách bên ngoài của phần tử.

Dùng để tách phần tử này với phần tử khác.

Có thể có giá trị âm.

Ảnh hưởng đến bố cục tổng thể của trang.

Ví dụ: tạo khoảng cách giữa hai thẻ <div>.

Padding

Là khoảng cách bên trong của phần tử.

Nằm giữa content và border.

Dùng để làm cho nội dung không sát viền.

Không có giá trị âm.

Làm tăng kích thước hiển thị của phần tử.

Ví dụ: tạo khoảng trống giữa chữ và viền của khung.