Cách quản lý khoảng cách và khoảng đệm trong thiết kế đáp ứng

Hướng dẫn thực tế này sẽ minh họa phương pháp quản lý khoảng cách và phần đệm trong các thiết kế đáp ứng.

Làm cách nào để quản lý khoảng cách và khoảng đệm trong thiết kế đáp ứng?

Phần đệm và khoảng cách trong các thiết kế đáp ứng có thể được quản lý bằng CSS. Một minh họa thực tế về việc quản lý khoảng cách và phần đệm được cung cấp dưới đây.

Bước 1: Tạo cấu trúc HTML

Đầu tiên, tạo cấu trúc HTML và một số văn bản bên trong nó bằng cách sử dụng

Và

thẻ:

< thân hình >
< h2 > Khoảng cách và đệm CSS đáp ứng < / h2 >
< div > Phần tử CSS này có phần đệm là 80px và khoảng cách là 40px. < / div >
< / thân hình >

Bước 2: Áp dụng CSS

---

---

Bây giờ, hãy áp dụng CSS trên

nhãn. Đầu tiên, đặt “ phần đệm ” giá trị thuộc tính thành “ 80px ” để tạo khoảng trống xung quanh phần tử. Tiếp theo, đặt “ lề ” giá trị thuộc tính thành “ 40px ” và tạo không gian xung quanh các phần tử bên ngoài đường viền. Cuối cùng, hãy sử dụng “ ranh giới ” thuộc tính và chỉ định đường viền và màu sắc để tạo đường viền:

div {
phần đệm : 80px ;
lề : 40px ;
ranh giới : 1px chất rắn màu xanh lá ;
}

Kết quả đầu ra ở trên xác nhận rằng khoảng cách và phần đệm đã được áp dụng.

Hãy kiểm tra xem nó có phản hồi hay không bằng cách thu nhỏ cửa sổ trình duyệt:

Bằng cách thu gọn cửa sổ, nội dung đã hoạt động phản hồi nhanh, điều này xác nhận rằng khoảng đệm và khoảng cách được áp dụng là phản hồi nhanh.

Phần kết luận

Để quản lý khoảng cách và khoảng đệm trong các thiết kế đáp ứng, tồn tại các thuộc tính CSS. Để thêm phần đệm trong thiết kế đáp ứng bằng cách sử dụng nút “ phần đệm ' tài sản. Tương tự, khoảng cách có thể được thêm vào trong thiết kế đáp ứng bằng cách sử dụng “ lề ' tài sản. Bài viết này đã giới thiệu cho người dùng một giải pháp để quản lý khoảng cách và phần đệm trong các thiết kế đáp ứng.