Giới Thiệu

Khi làm việc với CSS, một trong những vấn đề thường gặp nhất là xử lý khoảng cách giữa các phần tử, cụ thể là thuộc tính margin. Một tình huống phổ biến là khi margin của các phần tử con bị cộng lại, dẫn đến việc tạo ra các khoảng trống không mong muốn. Điều này đặc biệt gây khó khăn khi chúng ta thiết kế các component. Tuy nhiên, thuộc tính CSS mới margin-trim sẽ giúp bạn dễ dàng loại bỏ các margin thừa.

Vấn Đề Kích Thước Component

Xét một ví dụ đơn giản dưới đây, chúng ta có một thẻ card chứa ba thẻ con:

<div class="card">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
</div>

.card {
  background-color: var(--accent-color);
  padding: 1rem;
}

.child {
  margin-bottom: 2rem;
}

Khi áp dụng CSS trên, bạn sẽ thấy rằng margin của thẻ con cuối cùng làm cho thẻ card cao hơn mong đợi, gây ra khoảng trống không cần thiết. Thông thường, để giải quyết vấn đề này, chúng ta thường sử dụng selector :last-child:

.child {
  margin-bottom: 1rem;
}

.child:last-child {
  margin-bottom: 0;
}

Cách này tuy khắc phục được vấn đề nhưng không thực sự lý tưởng. Điều này có thể gây áp lực cho component con về việc phải biết liệu thành phần cha có muốn loại bỏ margin hay không.

Giải Pháp Tối Ưu Hơn

Một giải pháp khác là để component cha tự xử lý, chẳng hạn như sau:

.card {
  background-color: var(--accent-color);
  padding: 1rem;
}

.card > :last-child {
  margin-bottom: 0;
}

Mặc dù nghe có vẻ hợp lý, nhưng phương pháp này lại có nhược điểm. Nó yêu cầu component cha phải chọn thành phần của component con, điều này dẫn đến việc phá vỡ tính đóng gói của component.

Đ giới Thiệu Thuộc Tính margin-trim

Để giải quyết vấn đề trên, thuộc tính CSS margin-trim ra đời. Đây là một thuộc tính đơn giản nhưng vô cùng mạnh mẽ, cho phép bạn dễ dàng chỉ định các cạnh nào của phần tử sẽ bị loại bỏ margin thừa. Ví dụ:

.card {
  background-color: var(--accent-color);
  padding: 1rem;
  margin-trim: block-end;
}

.child {
  margin-bottom: 1rem;
}

Kết quả là khoảng cách thừa ở phía dưới thẻ card đã được loại bỏ một cách dễ dàng mà không cần thêm bất kỳ đoạn mã nào khác.

Thuộc tính margin-trim có thể được áp dụng cho cả bốn hướng: block-start, block-end, inline-start, và inline-end, cũng như sử dụng với block hoặc inline để loại bỏ margin ở cả hai đầu của trục được chỉ định.

.card {
  margin-trim: block; /* Loại bỏ từ trên xuống dưới */
  margin-trim: inline; /* Loại bỏ từ trái sang phải */
  margin-trim: block-start block-end; /* Loại bỏ từ trên xuống dưới */
  margin-trim: inline-start; /* Loại bỏ từ bên trái */
}

Kết Luận

Như đã thấy, thuộc tính margin-trim là một công cụ cực kỳ hữu ích giúp bạn quản lý margin một cách hiệu quả và dễ dàng hơn trong thiết kế component. Bạn sẽ không còn phải lo lắng về việc margin của các phần tử con tác động đến chiều cao của phần tử cha, từ đó tạo ra những trải nghiệm thiết kế tốt hơn và giúp việc phát triển web hiệu quả hơn.
source: viblo