Thu gọn ký quỹ trong CSS là gì? Và làm thế nào để tránh nó

Thu gọn ký quỹ là gì?

Thu gọn lề xảy ra khi các lề liền kề theo chiều dọc của các phần tử cấp khối va chạm để chia sẻ một không gian lề chung. Kích thước của không gian chia sẻ này được quy định bởi số lượng lớn hơn.

Bạn có thể hình dung đây là một trận đấu vật tay, nơi mà tỷ lệ chênh lệch lớn hơn sẽ chiếm ưu thế và chiến thắng.

Điều quan trọng là phải làm rõ ý nghĩa của nó là con số lớn hơn.

Nếu lề 70px va chạm với lề 90px, lề 90px sẽ thắng. Nếu lề -70px va chạm với lề -90px, -90px sẽ thắng.

Mặc dù về mặt kỹ thuật, một số âm là một giá trị nhỏ hơn trên thang đo toán học so với một số dương, nhưng thay vào đó, việc thu gọn lề thay vào đó sẽ rất hữu ích khi nhớ rằng giá trị số cao hơn sẽ có ý nghĩa cao hơn.

Thu gọn có liên quan bất kể đơn vị đo lường như pixel, rem, em hoặc phần trăm. Các đơn vị này có thể được tính toán với nhau ngay cả khi sử dụng hỗn hợp.

Trong các tình huống khác nhau, sự tương tác này có thể trở nên có vấn đề. Ví dụ: nếu bạn đang tạo một thành phần có thể sử dụng lại được mong đợi có một khoảng cách lề nhất quán xung quanh nó, bất kể vị trí.

Sự không nhất quán có thể xảy ra tùy thuộc vào, vị trí đặt thành phần đó vì ký quỹ có thể tương tác với thành phần khác. May mắn thay, chúng ta có thể thực hiện các biện pháp phòng ngừa để tránh điều này.

Việc thu gọn lề có thể gây ra các hành vi không mong muốn trong bố cục của bạn. Bạn có thể sẽ thấy khoảng cách được áp dụng dường như không khớp với những gì bạn mong đợi.

Thay vì cố gắng tăng lề bằng cách thêm các pixel bổ sung cho đến khi khoảng cách là chính xác, bạn có thể tìm hiểu hoạt động bên trong của thuộc tính lề để có thể nhận ra khi nào có thể xảy ra hiện tượng thu hẹp.

margin collapse 2

Ví dụ về mã thu gọn ký quỹ

<div class="one">Block-Level Element One</div>
<div class="two">Block-level Element Two</div>
div.one {
    margin-bottom: 30px;
}

div.two {
    margin-top: 100px;
}

Lợi nhuận âm

Giá trị ký quỹ âm cũng dễ bị thu hẹp ký quỹ. Chúng hoạt động như tỷ suất lợi nhuận tích cực, trong đó con số lớn hơn sẽ chiếm ưu thế.

Kết quả của xung đột lề -30px và -100px sẽ dẫn đến không gian lề là -100px.

Kết hợp lợi nhuận âm và biên dương

Khi một lề âm và một lề dương tương tác, các pixel sẽ được cộng lại với nhau, triệt tiêu lẫn nhau. Đây là nơi mà một số toán học sẽ là yếu tố.

Ví dụ: lề -30px và lề 10px sẽ dẫn đến không gian lề được chia sẻ là -20px. Ngoài ra, lề 10px và lề -1opx sẽ dẫn đến không có khoảng cách lề (-10 + 10 = 0)!

Cách nhận biết Thu gọn ký quỹ

Có nhiều tình huống khác nhau khi lợi nhuận có thể bị sụp đổ. Xem lại các so sánh bên dưới để hiểu rõ hơn về thời điểm có thể xảy ra sụp đổ ký quỹ.

Thu gọn ký quỹ

  • Các phần tử ở cấp độ khối, chẳng hạn như div hoặc là p
  • Lề dọc sẽ sụp đổ
  • Thu gọn sẽ chỉ xảy ra trong Bố cục Luồng, đây là chế độ bố cục mặc định
  • Một phần tử “vô hình” như <br/> sẽ không ngừng sụp đổ ký quỹ

Không có ký quỹ Thu gọn

  • Các phần tử anh chị em nằm ngang sẽ không bị thu gọn
  • Không bị thu hẹp lề trong Bố cục Linh hoạt, Lưới hoặc Định vị
  • Sự sụp đổ ký quỹ có thể xếp chồng lên nhau và tạo ra hiệu ứng domino của các anh chị em ảnh hưởng lẫn nhau
  • MỘT <hr/> phần tử giữa các anh chị em theo chiều dọc có thể ngăn chặn sự sụp đổ

Cách kiểm tra lợi nhuận của bạn

Tính năng Kiểm tra trong trình duyệt của bạn là một công cụ tuyệt vời để có cái nhìn trực quan về lề, phần đệm và các khía cạnh khác của Mô hình Hộp. Điều này sẽ giúp bạn xem liệu lợi nhuận có được chia sẻ hay không.

Mô hình hộp

Cách tránh Thu gọn ký quỹ

Đầu tiên, hãy nhớ rằng các lề tốt nhất nên được sử dụng để tăng khoảng cách giữa các phần tử anh chị em, không tạo khoảng cách giữa phần tử con và phần tử cha. Nếu bạn cần tăng không gian trong bố cục Luồng, hãy tiếp cận trước để có phần đệm nếu có thể.

Ngoài ra, hãy xem xét chế độ bố cục khi thêm lề. Hãy lưu ý xem bạn đang ở chế độ bố cục nào và đề phòng việc thu hẹp lề bất cứ khi nào trong Bố cục Luồng thông thường.

Để thêm khoảng cách giữa các anh chị em và tránh hoàn toàn việc thu hẹp ký quỹ, hãy xem xét sử dụng Flexbox hoặc Grid và sử dụng các chức năng khoảng cách của chúng.

Bạn cũng có thể cân nhắc sử dụng thư viện thành phần được căn chỉnh theo hướng dẫn về khoảng cách của một hệ thống thiết kế cụ thể. Hoặc bạn có thể sử dụng một thư viện mã nguồn mở đã giải quyết các vấn đề về thu hẹp ký quỹ. Bạn cũng có thể thiết lập một hệ thống thiết kế cho nhóm của bạn, nơi bạn có thể sử dụng lề và đệm nhất quán trong suốt giao diện người dùng của mình.

Cuối cùng, cố gắng phát triển cảm giác về thời điểm xảy ra sụp đổ ký quỹ. Bây giờ bạn đã nhận thức rõ hơn về hành vi này, bạn sẽ bắt đầu nhận thấy nó thường xuyên hơn.

Sử dụng các công cụ kiểm tra trình duyệt đáng tin cậy của bạn khi radar thu hẹp ký quỹ của bạn được kích hoạt. Nếu bạn tìm thấy nó, hãy xóa nó để ngăn việc sử dụng lặp lại kiểu vì nó có thể được sử dụng lại và gây ra sự cố trong tương lai.

Tài nguyên trên Ký quỹ Thu gọn

Nếu bạn muốn tìm hiểu sâu hơn về vấn đề sụp đổ ký quỹ, tôi thực sự khuyên bạn nên đọc Quy tắc ký quỹ thu gọn của Josh W. Comeau.

Tôi cũng giới thiệu khóa học toàn diện của anh ấy CSS dành cho nhà phát triển JavaScript nếu bạn muốn lấp đầy bất kỳ khoảng trống nào trong kiến ​​thức CSS của mình và tìm hiểu thêm về các chủ đề như thế này.

Bản tóm tắt

Sự sụp đổ ký quỹ có thể là một hành vi CSS mà bạn đã trải qua trước đó và chưa có định nghĩa hoặc bạn có thể không có sẵn tất cả các công cụ để tránh nó.

Khía cạnh phức tạp này của tài sản ký quỹ thường có thể bị bỏ qua và tàn phá các hành vi được mong đợi. Hiểu những hiệu ứng này có thể giúp cải thiện giao diện người dùng của bạn và giảm số lượng lỗi trong CSS của bạn.

Chúc bạn viết mã vui vẻ!

Thanks for Reading

Enjoyed this post? Share it with your networks.

Get more stuff

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Leave a Feedback!