Khoảng cách giữa các mục danh sách css
|
Nếu hai hoặc nhiều phần tử gần nhau, thì người dùng sẽ cho rằng chúng bằng cách nào đó thuộc về nhau. Khi nhóm nhiều yếu tố thiết kế, người dùng có thể quyết định cách chúng liên quan với nhau bằng khoảng cách giữa chúng. Nếu không có khoảng cách, người dùng sẽ khó đọc lướt trang và biết mục nào có liên quan và mục nào không Show
Trong bài viết này, tôi sẽ đề cập đến mọi thứ bạn cần biết về khoảng cách trong CSS, các cách khác nhau để đạt được điều đó và khi nào nên sử dụng phần đệm hoặc lề. Hãy đi sâu vào Mục lục
Các loại khoảng cáchKhoảng cách trong CSS có hai loại, một loại nằm ngoài phần tử và loại còn lại nằm trong phần tử đó. Đối với bài viết này, tôi sẽ gọi chúng là bên ngoài và bên trong. Giả sử rằng chúng ta có một phần tử, khoảng cách bên trong nó là khoảng cách bên trong và khoảng cách bên ngoài nó là khoảng cách bên ngoài Trong CSS, có thể thực hiện giãn cách như bên dưới Tôi đã sử dụng Lề - Khoảng cách NgoàiNó được sử dụng để thêm khoảng cách giữa một phần tử và phần tử khác. Ví dụ, trong ví dụ trước, tôi đã thêm Vì lề có thể được thêm vào theo bốn hướng khác nhau (trên, phải, dưới, trái), điều quan trọng là phải làm sáng tỏ một số khái niệm cơ bản trước khi đi sâu vào ví dụ và các trường hợp sử dụng Thu gọn ký quỹNói một cách đơn giản, thu gọn lề xảy ra khi hai phần tử dọc có lề và một trong số chúng có lề lớn hơn phần tử còn lại. Trong trường hợp đó, số dư lớn hơn sẽ được sử dụng và phần còn lại sẽ bị bỏ qua Trong mô hình mô phỏng ở trên, một phần tử có Để tránh sự cố như vậy, bạn nên sử dụng lề một chiều theo bài viết này. Hơn nữa, Thủ thuật CSS đã thực hiện một cuộc thăm dò giữa Xem cách khắc phục sự cố bên dưới Với bộ chọn CSS Thử nghiệm Một ví dụ khác có liên quan đến sự sụp đổ lề là con và cha mẹ. Giả sử như sau Lưu ý rằng phần tử con được dán vào đầu phần tử cha của nó. Đó là bởi vì lề của nó bị sụp đổ. Theo W3C, đây là một số giải pháp cho vấn đề đó
Một giải pháp đơn giản hơn sẽ là thêm Ký quỹ âmNó có thể được sử dụng với bốn hướng cho lề và nó rất hữu ích trong một số trường hợp sử dụng. Giả sử như sau Cha mẹ có Thử nghiệm Nếu bạn muốn tìm hiểu thêm về lợi nhuận âm, tôi giới thiệu bài viết này của Peter-Paul Koch Đệm - Khoảng cách bên trongNhư tôi đã đề cập trước đây, phần đệm thêm khoảng cách bên trong bên trong một phần tử. Mục tiêu của nó có thể thay đổi tùy theo trường hợp được sử dụng Chẳng hạn, nó có thể được sử dụng để tăng khoảng cách xung quanh các liên kết, điều này sẽ dẫn đến vùng có thể nhấp lớn hơn cho liên kết Đệm không hoạt độngĐiều quan trọng cần lưu ý là phần đệm dọc không hoạt động với các phần tử có Đây chỉ là một lời nhắc thân thiện rằng thuộc tính Khoảng cách lưới CSSTrong lưới CSS, có thể dễ dàng thêm khoảng cách giữa các cột và hàng với thuộc tính Các thuộc tính longhand cho khoảng cách có thể được sử dụng như dưới đây Khoảng trống CSS FlexboxThêm vào đó, không thể sử dụng nó với CSS Định vị CSSNó có thể không phải là một cách trực tiếp để tạo khoảng cách cho các phần tử, nhưng nó đóng một vai trò trong một số trường hợp thiết kế. Ví dụ: một phần tử được định vị tuyệt đối cần được định vị Xem xét ví dụ sau. Thẻ có biểu tượng phải được đặt cách nhau từ cạnh trên cùng bên trái của thẻ gốc. Trong trường hợp đó, CSS sau đang được sử dụng Các trường hợp sử dụng và ví dụ thực tếTrong phần này, bạn sẽ trải qua các trường hợp sử dụng khác nhau mà bạn sẽ gặp phải trong công việc hàng ngày khi làm việc trên các dự án CSS Thành phần tiêu đềTrong trường hợp này, tiêu đề có logo, điều hướng và hồ sơ người dùng. Bạn có đoán được khoảng cách nên được thực hiện như thế nào trong CSS không? Tiêu đề có phần đệm ở bên trái và bên phải. Mục đích của việc này là để nội dung không bị dính vào các cạnh Đối với điều hướng, mỗi liên kết phải có đủ phần đệm từ các cạnh dọc và ngang, do đó, khu vực có thể nhấp của nó có thể lớn, điều này sẽ nâng cao khả năng truy cập Và đối với khoảng cách giữa mỗi mục, bạn có thể sử dụng Cuối cùng, hình đại diện và tên người dùng có lề bên trái Lưu ý rằng nếu bạn đang xây dựng một trang web đa ngôn ngữ, bạn nên sử dụng các thuộc tính logic CSS như bên dưới Lưu ý rằng khoảng cách xung quanh dấu phân cách hiện bằng nhau. Lý do là các mục điều hướng không có chiều rộng cụ thể và thay vào đó, chúng có phần đệm. Do đó, chiều rộng của các mục điều hướng dựa trên nội dung của chúng. Dưới đây là các giải pháp
Giải pháp dễ nhất và tốt hơn là giải pháp thứ ba, đó là thêm một Thử nghiệm Khoảng Cách Trong Hệ Thống Lưới - FlexboxLưới là một trong những trường hợp được sử dụng nhiều nhất cho khoảng cách. Xem xét ví dụ sau Khoảng cách phải ở giữa các cột và hàng. Hãy xem xét đánh dấu HTML sau Thông thường, tôi thích giữ các thành phần được đóng gói và tránh thêm lề cho chúng. Vì lý do đó, tôi có phần tử Với CSS ở trên, bốn thẻ sẽ nằm trong mỗi hàng. Đây là một giải pháp khả thi để thêm khoảng cách giữa chúng Bằng cách sử dụng hàm CSS
Tôi đã học được giải pháp trên từ CSS Wizardy nhiều năm trước (tôi quên mất tiêu đề bài viết, nếu bạn biết thì hãy cho tôi biết) Lý do tôi sử dụng Thử nghiệm Một khái niệm tương tự khác là thêm phần đệm vào cả hai bên và khi đó lề là số âm. Dưới đây là một ví dụ về những câu chuyện của Facebook Khoảng Cách Trong Hệ Thống Lưới - CSS GridVà bây giờ, đến phần thú vị. Với lưới CSS, bạn có thể thêm khoảng cách rất dễ dàng với Và đó là nó. Điều đó không dễ dàng và đơn giản hơn nhiều sao? Gap theo yêu cầuĐiều tôi thực sự thích về lưới CSS là Tôi có một phần với hai thẻ. Trên thiết bị di động, tôi muốn khoảng cách ở bên dưới cái đầu tiên và trên máy tính để bàn, khoảng cách sẽ nằm giữa chúng. Không thể có sự linh hoạt này nếu không có lưới CSS. Đầu tiên, xem bên dưới Không thoải mái, phải không? Và thế là xong. Nhiều, dễ dàng hơn nhiều Xử lý tiền ký quỹ dưới cùngGiả sử rằng các thành phần sau ngăn xếp. Mỗi thành phần có một lề dưới Lưu ý rằng phần tử cuối cùng có lề. Điều này không chính xác vì lề chỉ nên nằm giữa các phần tử Nó có thể được sửa bằng một trong các giải pháp dưới đây Giải pháp 1 - Bộ chọn CSS .element span {
display: inline-block;
padding-top: 1rem;
padding-bottom: 1rem;
}
|
