Margin và Padding trong CSS — Khác nhau như thế nào?

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

Margin so với Padding

Định nghĩa ngắn gọn nhất:

Khi bạn áp dụng margin hoặc padding cho một phần tử HTML, chúng ảnh hưởng đến phần tử theo cách khác nhau:

Với hì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 tế.

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

Nút bấm này có:

Margin 24px: thêm khoảng cách xung quanh nút và đẩy nó ra khỏi viền của phần tử cha chứa nó
Border 4px
Padding 16px: thêm khoảng cách giữa viền của nút và nội dung bên trong
Nội dung (trong trường hợp này là nhãn text: "Button")

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

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