Introduction: Những điều cơ bản về spacing trong CSS giúp chúng ta tạo ra khoảng cách giữa các phần tử trên giao diện website. Tuy nhiên, việc sử dụng các thuộc tính spacing như margin và padding có thể gây nhầm lẫn cho những người mới học. Bài viết này sẽ giúp bạn hiểu rõ hơn về cách sử dụng và tối ưu spacing trong CSS.
Các loại spacing
Trong CSS, chúng ta thường sử dụng hai loại spacing chính là "outer" và "inner". Những ví dụ dưới đây sẽ giúp bạn hiểu rõ hơn về hai loại spacing này.
Ví dụ về outer và inner spacing
Với ví dụ trên, chúng ta có thể sử dụng margin và padding để tạo khoảng cách. Đơn giản, đúng không?
.element { padding: 20px; margin-bottom: 20px; }Tuy nhiên, không chỉ đơn giản như vậy, cũng có những trường hợp khác thú vị mà chúng ta cần tìm hiểu.
Margin
Margin thường được sử dụng để tạo khoảng cách giữa các phần tử. Ví dụ, chúng ta có thể sử dụng margin-bottom để tạo khoảng cách với phần tử bên dưới.
Hãy lưu ý rằng margin có thể được sử dụng ở 4 hướng (top, right, bottom, left), và chúng ta nên nắm rõ những điều cơ bản này để có thể áp dụng tốt trong dự án thực tế.
Vấn đề margin collapse
Margin collapse xảy ra khi chúng ta có 2 phần tử nằm hàng dọc và có margin, và một trong số chúng có margin lớn hơn phần tử còn lại. Trong trường hợp này, chỉ margin lớn hơn sẽ được sử dụng và margin của phần tử còn lại sẽ bị bỏ qua.
Ví dụ về margin collapse
Ví dụ trên, phần tử ở trên có margin-bottom: 50px và phần tử ở dưới có margin-top: 30px. Khoảng cách giữa hai phần tử này không phải là 80px mà là 50px, do margin của phần tử ở trên lớn hơn. Đây chính là hiện tượng gọi là "margin collapse".
Để giải quyết vấn đề này, người ta khuyến khích chỉ sử dụng một hướng margin. Ví dụ, nếu muốn có khoảng cách 80px giữa hai phần tử, chỉ cần sử dụng margin-bottom: 80px. Tuy nhiên, nếu sử dụng .element {margin-bottom: 80px}, phần tử cuối cùng sẽ có khoảng trống dư thừa. Để khắc phục điều này, chúng ta có thể sử dụng :not(:last-child).
.element:not(:last-child) { margin-bottom: 80px; }Một ví dụ khác là mối quan hệ giữa phần tử cha và con bên trong. Nếu chúng ta có HTML và CSS như sau:
I'm the child element .parent { margin: 50px auto 0 auto; width: 400px; height: 120px; } .child { margin: 50px 0; }
Ví dụ về margin collapse giữa phần tử cha và con bên trong
Phần tử con không có khoảng cách phía trên so với phần tử cha bao ngoài, do margin collapse của phần tử cha ảnh hưởng lên phần tử con. Để khắc phục trường hợp này, chúng ta có thể sử dụng display: inline-block cho phần tử con hoặc thiết lập padding-top: 50px cho phần tử cha.
Negative Margin
Negative margin là sử dụng giá trị âm trong margin. Điều này rất hữu ích trong nhiều trường hợp, ví dụ như khi chúng ta có một giao diện với padding bao quanh, làm cho phần tử con bị thu vào.
Ví dụ về negative margin
Nhưng nếu chúng ta muốn phần tử con rộng 100% của phần tử cha mà không làm mất padding của phần tử cha, ta có thể sử dụng negative margin. Ví dụ, nếu phần tử cha có padding: 1rem, ta có thể sử dụng margin số âm top, left và right với giá trị ngược lại 1rem, tức là -1rem, để phần tử con giãn ra 100% của phần tử cha và dính trên cùng.
.parent { padding: 1rem; } .child { margin-left: -1rem; margin-right: -1rem; margin-top: -1rem; }Padding - Inner Spacing
Padding, hay còn gọi là "inner" spacing, được sử dụng để thêm khoảng cách bên trong phần tử. Padding có rất nhiều ứng dụng. Ví dụ, chúng ta có thể sử dụng padding cho thẻ a để mở rộng phạm vi click của thẻ.
Ví dụ về padding
Padding không hoạt động
Một điều quan trọng cần lưu ý là padding-top và padding-bottom sẽ không hoạt động nếu phần tử đang làm việc có display: inline như là thẻ span hay a. Nếu padding được thêm vào, nó sẽ không ảnh hưởng đến phần tử. Để giải quyết vấn đề này, chúng ta có thể sử dụng thuộc tính display với giá trị khác như inline-block hoặc block.
.element span { display: inline-block; padding-top: 1rem; padding-bottom: 1rem; }Một vài ví dụ thực tế
Xử lý với margin bottom
Giả sử chúng ta có một layout như dưới đây, và mỗi phần tử có margin-bottom: 20px. Nhưng phần tử cuối cùng không nên có margin-bottom.
Ví dụ về xử lý với margin bottom
Vậy làm sao để giải quyết trường hợp này? Chúng ta có thể sử dụng :not(:last-child) như sau:
.element:not(:last-child) { margin-bottom: 20px; }Tuy nhiên, cách này chỉ áp dụng đúng khi chỉ hiển thị một cột. Nếu giao diện có hai cột, ví dụ như trong hình dưới đây, cách này không còn đúng nữa, vì số 4 vẫn có margin bottom.
Ví dụ với nhiều cột
Trong trường hợp này, ta có thể sử dụng margin số âm cho phần tử bọc ngoài để lấy margin-bottom bằng giá trị âm của phần tử con:
.wrapper { margin-bottom: -20px; }Card Component
Ví dụ: chúng ta có một component card như dưới đây. Nhìn vào giao diện đơn giản như này, làm sao chúng ta phân biệt được sử dụng margin ở đâu và sử dụng padding ở đâu?
Ví dụ về Card Component
Và hình dưới đây sẽ cho bạn thấy, bạn có nghĩ giống mình không?
Phân tích Card Component
Cinnamon Rolls
.card__content { padding: 10px; } .card__title, .card__author, .card__rating { margin-bottom: 10px; }Với code như này, chúng ta có kết quả như trên. Tuy nhiên, phần cardmeta vẫn dính sát lề của phần cardcontent, vì padding của content bao ngoài làm cho border bị thu vào bên trong.
Lỗi border trong Card Component
Để giải quyết vấn đề này, chúng ta có thể thêm padding left và right vào card__meta:
.card__meta { padding: 10px 10px 0 10px; border-top: 1px solid #e9e9e9; margin: 0 -10px; }
Lỗi border trong Card Component đã được khắc phục
Tạm kết
Với những kiến thức cơ bản nhưng bổ ích này, chúng ta có thể cải thiện kiến thức và ứng dụng spacing trong CSS một cách hiệu quả. Hãy áp dụng những kiến thức này vào dự án của bạn và xem kết quả tuyệt vời mà bạn có thể đạt được.
The article is based on the original article by ishadeed.
