Margin và Padding trong CSS - Sự khác biệt là gì?

Tìm hiểu về sự khác biệt giữa lề và đệm trong CSS.

Lề so với Padding

Hãy bắt đầu với định nghĩa ngắn gọn nhất:

• margin thêm khoảng cách bên ngoài đường viền của các phần tử HTML
• padding thêm khoảng cách bên trong đường viền của các phần tử HTML

Khi bạn áp dụng lề hoặc phần đệm cho một phần tử HTML, đây là cách chúng ảnh hưởng đến phần tử một cách khác nhau:

Với hình ảnh minh họa khái niệm ở trên, hãy áp dụng kiến ​​thức này vào một phần tử HTML thực.

Trên đây là một <button> đơn giản phần tử bên trong <div> thùng đựng hàng.

Nút có:

• Lề 24px để thêm không gian xung quanh nút và đẩy nó ra khỏi đường viền của phần tử chính mà nó nằm bên trong.
• Đường viền 4px
• Khoảng đệm 16px để thêm khoảng cách giữa đường viền của nút và nội dung của nó.
• Nội dung (trong trường hợp này là nhãn văn bản:Nút)

button {
    padding: 16px; 
    margin: 24px; 
    border: 4px solid #282828;
}

Cả margin và padding thuộc tính kiểm soát khoảng trắng. Tuy nhiên, chúng có chức năng ngược lại về cách chúng áp dụng nó.