Sự khác biệt giữa ký quỹ và đệm

Ký quỹ so với đệm
 

Sự khác biệt giữa lề và phần đệm là một khía cạnh quan trọng trong CSS vì lề và phần đệ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. Đệm và 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 thích hợp. 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ề ngăn cách các khối vớ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.

Đệm là gì?

Trong CSS (Cascading Style Sheets), phần đệm là khoảng trống được giữ giữa nội dung và đường viền. Nó tách nội dung của một khối từ 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ữ padding đệm trong mã CSS. Ví dụ: để thêm phần đệm 25px xung quanh nội dung mã sau đây có thể được sử dụng.

div
chiều rộng: 300px;
chiều cao: 300px;
phần đệm: 25px;
viền: rắn 25px;

Nếu cần thiết, 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 cùng. Đ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;
đệm-top: 25px;
đệm dưới cùng: 35px;
đệm-trái: 5px;
đệm-phải: 10px;
viền: rắn 25px;

Ký quỹ là gì?

Trong CSS (Cascading Style Sheets), lề là khoảng trắng bên ngoài đường viền. Nó tách một khối từ 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 phần đệm là phần 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ố lượng lề trong CSS được chỉ định bằng cách sử dụng thuật ngữ lề lề lề. Đoạn mã sau áp dụng lề 25px xung quanh khối div.

div
chiều rộng: 320px;
chiều cao: 320px;
viền: 5px đặc;
lề: 25px;

Các giá trị khác nhau cũng có thể được chỉ định 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;
viền: 5px đặc;
lề trên: 25px;
lề dưới: 35px;
lề trái: 5px;
lề phải: 10px;

Sự khác biệt giữa Margin và Padding là gì?

• Đệm là khoảng trắng giữa đường viền và nội dung trong khi lề là khoảng trống bên ngoài đường viền.

• Đệm ngăn cách nội dung của một khối từ đường viền. Lề ngăn cách một khối với khối kia.

• Đệm bao gồm hình ảnh nền và màu nền được áp dụng cho nội dung trong khi 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ấp.

Tóm lược:

Đệm so với ký quỹ

Đệm là không gian 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 lề không chứa chúng. Các 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 để đệm thì điều đó sẽ không xảy ra.

Hình ảnh lịch sự:

1. Mô hình hộp CSS của Felix.leg (CC BY-SA 3.0)