Lề so với Đệm
Sự khác biệt giữa lề và đệm là một khía cạnh quan trọng trong CSS vì lề và đệm là hai khái niệm quan trọng được sử dụng trong CSS để cung cấp khoảng cách giữa các mục khác nhau. Phần đệm và phần lề không thể thay thế cho nhau và có các mục đích khác nhau nên phải được sử dụng một cách hợp lý. Phần đệm là khoảng trống giữa nội dung và đường viền của một khối. Mặt khác, lề là không gian bên ngoài đường viền của một khối. Lề tách các khối khỏi các khối liền kề trong khi phần đệm ngăn cách đường viền với nội dung.
Padding là gì?
Trong CSS (Cascading Style Sheets), phần đệm là không gian được giữ giữa nội dung và đường viền. Nó tách nội dung của một khối khỏi cạnh của nó. Phần đệm trong suốt và bao gồm cả hình nền hoặc màu nền của phần tử. Số lượng phần đệm của một phần tử được chỉ định bằng cách sử dụng thuật ngữ “phần đệm” trong mã CSS. Ví dụ: để thêm phần đệm 25px xung quanh nội dung, bạn có thể sử dụng mã sau.
div {
chiều rộng: 300px;
chiều cao: 300px;
padding: 25px;
border: 25px solid;
}
Nếu cần, các giá trị đệm khác nhau cũng có thể được chỉ định riêng cho trái, phải, trên và dưới. Đoạn mã sau chỉ định các giá trị đệm khác nhau cho mỗi bên.
div {
chiều rộng: 300px;
chiều cao: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
border: 25px solid;
}
Ký quỹ là gì?
Trong CSS (Cascading Style Sheets), lề là khoảng trống bên ngoài đường viền. Nó ngăn cách một khối với các khối khác. Lề cũng trong suốt, nhưng một sự khác biệt lớn với padding là lề không bao gồm hình nền hoặc màu nền được áp dụng cho phần tử. Số tiền ký quỹ trong CSS được chỉ định bằng cách sử dụng thuật ngữ "ký quỹ". Đoạn mã sau đã áp dụng lề 25px xung quanh khối div.
div {
chiều rộng: 320px;
chiều cao: 320px;
border: 5px solid;
lề: 25px;
}
Cũng có thể chỉ định các giá trị khác nhau cho các mặt khác nhau của khối. Đoạn mã sau áp dụng các giá trị ký quỹ khác nhau cho mỗi bên.
div {
chiều rộng: 320px;
chiều cao: 320px;
border: 5px solid;
margin-top: 25px;
margin-bottom: 35px;
margin-left: 5px;
margin-right: 10px;
}
Sự khác biệt giữa Margin và Padding là gì?
• Khoảng đệm là khoảng cách giữa đường viền và nội dung trong khi lề là khoảng trống bên ngoài đường viền.
• Phần đệm ngăn cách nội dung của một khối khỏi đường viền. Lề ngăn cách khối này với khối kia.
• Phần đệm bao gồm các hình nền và màu nền được áp dụng cho nội dung trong khi phần lề không có nội dung như vậy.
• Lề của các khối liền kề có thể chồng lên nhau trong khi phần đệm không chồng lên nhau.
Tóm tắt:
Padding vs Margin
Padding là khoảng trống bên trong đường viền của một khối ngăn cách đường viền với nội dung. Lề là khoảng cách bên ngoài đường viền ngăn cách một khối với các khối liền kề. Một điểm khác biệt nữa là phần đệm bao gồm hình nền và màu nền được áp dụng xung quanh nội dung trong khi phần lề không chứa chúng. Lề của các khối liền kề đôi khi có thể trùng nhau khi trình duyệt hiển thị trang nhưng đối với phần đệm, điều này sẽ không xảy ra.
