Sự khác nhau giữa padding và margin trong CSS

Cả padding và margin đều là khoảng cách, vậy nó khác nhau chỗ nào? Dễ ẹc: Đó là padding nằm trong viền, còn margin nằm ngoài viền.

– Padding: Có nghĩa là “khoảng đệm” từ nội dung tới viền (border).

– Margin: Có nghĩa là “khoảng lề” từ viền (border) ra ngoài.

Ví dụ:

– Bạn muốn tạo một cái viền màu đen bao quanh nội dung, thì bạn xài thuộc tính border và gán giá trị là black (màu đen).

– Sau đó bạn muốn cái viền này dày 5px, thì bạn ghi thêm solid 5px.

– Bây giờ bạn muốn cái viền này bao quanh nhưng cách nội dung 10px, thì bạn xài thuộc tính padding và gán giá trị là 10px.

– Cuối cùng bạn muốn cái viền này cách hàng xóm xung quanh 10px, thì bạn xài thuộc tính margin và gán giá trị là 10px.

.class{
    border: black solid 5px;
    padding: 10px;
    margin: 10px;
}

Hiểu được điểm khác nhau nhỏ xíu này sẽ giúp bạn code giao diện web tốt hơn và dễ hơn.

Tôi là nhà sáng lập Kênh Tin Học - Một người luôn có niềm đam mê với mọi thứ liên quan đến công nghệ và đổi mới.