Các ' lề trên ” thuộc tính giúp rất nhiều nhà phát triển trong việc tạo bố cục đáp ứng và định vị các phần tử HTML. Việc sử dụng thuộc tính “margin-top” cung cấp nhiều quyền kiểm soát hơn đối với các phần tử HTML, thêm sự phân tách trực quan và giúp tạo ra các thiết kế đáp ứng tốt hơn. Hướng dẫn này trình bày thuộc tính lề trên cùng với cách triển khai thực tế trong CSS.
- Tài sản “margin-top” là gì?
- Sử dụng Thuộc tính “margin-top” với Giá trị Dương
- Sử dụng Thuộc tính “margin-top” với Giá trị Âm
Tài sản “margin-top” là gì?
Các ' lề trên ” thuộc tính được sử dụng để tạo thêm khoảng trống giữa các phần tử HTML. Nó có thể được thiết lập với cả giá trị dương và âm. Các giá trị này được đặt theo nhu cầu của thiết kế và giúp ngăn chồng chéo và điều chỉnh khoảng cách giữa các phần tử HTML.
Làm cách nào để sử dụng tài sản “margin-top” với giá trị dương?
Thuộc tính “margin-top” có giá trị dương sẽ thêm khoảng cách bổ sung từ vị trí trên cùng về phía trung tâm của phần tử HTML đã chọn. Giá trị được cung cấp có thể ở dạng pixel, phần trăm, rem hoặc ở các giá trị toàn cầu như tự động, kế thừa, không đặt, v.v. Chúng ta hãy xem qua một ví dụ để hiểu rõ hơn:
Ví dụ: Sử dụng giá trị dương
Giả sử một tệp HTML tạo ra một “ Sau khi tạo cấu trúc HTML, hãy áp dụng các thuộc tính CSS cho “ tích cực ' lớp học: Trong đoạn mã trên: Sau khi thực thi đoạn mã trên, trang web trông như thế này: Ảnh gif ở trên minh họa tác dụng của việc đặt giá trị của thuộc tính lề trên trên trang web. Các ' lề trên ” có giá trị âm đặt khoảng cách bổ sung từ vị trí trên cùng đối diện với trung tâm hoặc hướng ra bên ngoài trang so với thành phần HTML đã chọn. Nó chủ yếu được sử dụng để tạo các hiệu ứng chồng chéo hoặc trong việc định vị phần tử HTML. Hãy để chúng tôi đi qua một ví dụ để hiểu rõ hơn. Ví dụ: Sử dụng Giá trị Âm Giả sử một tệp HTML tạo ra một “ Mô tả của đoạn mã nêu trên được mô tả dưới đây: Sau khi thực thi đoạn mã trên, trang web sẽ xuất hiện như sau: Ảnh gif ở trên hiển thị hiệu ứng xảy ra trên thiết kế của trang web bằng cách đặt giá trị âm cho thuộc tính lề trên. Các ' lề trên ” thuộc tính được sử dụng để tạo thêm khoảng trống giữa các phần tử HTML. Nó có thể được đặt với cả giá trị dương và âm. Nếu thuộc tính “margin-top” được gán với một giá trị dương, thì khoảng trống bổ sung sẽ được thêm vào giữa trang web hoặc phần tử HTML đã chọn. Trong trường hợp giá trị “âm”, khoảng trắng được thêm vào nhưng hướng ra bên ngoài trang. Bài viết này giải thích thuộc tính lề trên trong CSS là gì.
< thân hình >
< div lớp học = 'tích cực' >
< P > Đầu ký quỹ có giá trị dương được chỉ định P >
div >
thân hình >
< phong cách >
.tích cực {
chiều rộng: 300px;
chiều cao: 200px;
màu nền: rừng xanh;
cỡ chữ: 20px;
màu sắc: #ffff;
lề trên: 50px;
}
phong cách >
Làm cách nào để sử dụng Thuộc tính “margin-top” với Giá trị âm?
.tiêu cực {
màu trắng;
căn chỉnh văn bản: trung tâm;
màu nền: màu đỏ ;
lề trên: -30px ;
phần đệm: 30px;
chiều cao: 100px;
}
phong cách >
< thân hình >
< div lớp học = 'tiêu cực' >
Giá trị âm được chỉ định vì Thuộc tính ký quỹ
div >
thân hình >
Phần kết luận