Khi nào nên sử dụng lề so với phần đệm trong CSS

” vùng chứa có lớp “ lề-div ” và áp dụng “ Phong cách ” thuộc tính là “ đường viền: 1px màu đen đặc ”. Sau đó, thêm một số văn bản trong “

' nhãn:

< div lớp = 'margin-div' Phong cách = 'viền:1px màu đen đặc' >
< P >Linuxhint là một trong những trang web hướng dẫn tốt nhất.< anh >
< / P >
< div >

đầu ra

Bây giờ, hãy áp dụng thuộc tính “margin” trên lớp “.margin-div”:

.margin-div {
lai lịch- màu : rgb ( 199 , 238 , 205 ) ;
nét chữ- kích thước : Trung bình;
ranh giới : 3px rgb ( 114 , 250 , 114 ) ;
lề: 100px 100px 100px 100px;
}

Trong đoạn mã trên, “ .margin-div ” được sử dụng để truy cập phần tử div để áp dụng các thuộc tính được liệt kê bên dưới:

• “ màu nền ” thuộc tính được sử dụng để áp dụng màu trong nền.
• “ cỡ chữ ” được sử dụng để điều chỉnh kích thước của phông chữ.
• “ lề ” phân bổ không gian bên ngoài phần tử. Chẳng hạn, chúng tôi đã đặt thuộc tính “margin” là “ 100px ”.

Tại đây, bạn có thể thấy chúng tôi đã thiết lập thành công “ lề ” tài sản thứ hai “ div ' thành phần:

Làm cách nào để sử dụng 'phần đệm' trong CSS?

Để sử dụng thuộc tính “padding”, các ví dụ nêu trên đã được sử dụng. Trong lần thứ hai “ div ” vùng chứa, hãy sử dụng lớp “ đệm-div ” để áp dụng phần đệm:

< div lớp = 'linux' >
< P > Linuxhint là một trong những trang web hướng dẫn tốt nhất < / P >
< / div >
< div lớp = 'padding-div' Phong cách = 'viền:1px màu đen đặc' >
< P >Linuxhint là một trong những trang web hướng dẫn tốt nhất.< anh >
< / P >
< / div >

đầu ra

Để áp dụng phần đệm và các thuộc tính CSS khác trên “ .padding-div ” lớp, hãy xem mã được cung cấp:

.padding-div {
lai lịch- màu : rgb ( 199 , 238 , 205 ) ;
nét chữ- kích thước : Trung bình;
phần đệm: 50px 50px 50px 50px;
}

Trong mã được đề cập ở trên, chúng tôi đã truy cập vào phần thứ hai “ div ” phần tử sử dụng lớp “ .padding-div ”. Chúng tôi đã đặt “màu nền” và “cỡ chữ”. Hơn nữa, “ đệm ” thuộc tính được sử dụng để thêm khoảng trống xung quanh nội dung phần tử từ mỗi bên dưới dạng “ 50px ”.

đầu ra

Chúng tôi đã giải thích sự khác biệt và cách sử dụng “padding” và “margin” trong CSS.

Phần kết luận

CSS “ lề ” được sử dụng để đặt khoảng cách xung quanh phần tử, trong khi “ đệm ” được sử dụng để thêm khoảng cách xung quanh nội dung phần tử. Để áp dụng thuộc tính lề hoặc phần đệm, trước tiên, hãy tạo một “ div ” vùng chứa và chỉ định lớp. Sau đó, truy cập lớp theo tên lớp và áp dụng “ lề ' và ' đệm ' tính chất. Bài đăng này đã giải thích việc sử dụng lề so với phần đệm trong CSS.