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.
[css] .class{border: black solid 5px;
padding: 10px;
margin: 10px;
}
[/css]
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.