Bài viết được sự cho phép của tác giả Trần Anh Tuấn
Khi các bạn code giao diện cho một dự án nào đó chẳng hạn, các bạn sẽ thấy rằng để làm khoảng cách giữa các phần tử thì sẽ có nhiều cách như margin hoặc padding hay gọi chung là spacing. Tuy nhiên mình thấy nhiều bạn mới học thì hay bị rối giữa việc dùng 2 thứ này, hôm nay mình lại tiếp tục research tìm nội dung về nó để viết cho các bạn, hi vọng sẽ
giúp ích được cho các bạn phần nào trong việc cải thiện kiến thức hơn, thông suốt hơn về spacing để có thể làm chủ việc code tốt hơn.
Các loại spacing
Như mình đã nói ở trên thì trong CSS có 2 loại spacing đó chính là outer-space và inner-space mà chúng ta hay gặp. Trong bài viết này mình gọi tạm là outer và inner cho
dễ hiểu nhé. Ví dụ như hình dưới đây khoảng trống bên ngoài là outer và bên trong là inner.
Ví dụ ở trên có class là element đi thì chúng ta có thể có CSS đơn giản như này với inner là padding và outer là margin. Đơn giản đúng
không nào ?
.element {padding:20px;margin-bottom:20px;}
Tuy nhiên không chỉ đơn giản như vậy đâu, nó còn nhiều trường hợp khác thú vị lắm, chúng ta sẽ cùng nhau tìm hiểu tiếp dưới đây nhé.MarginMargin thường được sử dụng khi các bạn muốn tạo khoảng cách giữa phần tử này so với các phần tử khác. Như ví dụ ở trên thì mình có dùng margin-bottom: 20px để tạo ra khoảng cách so
với phần tử ở dưới.Chắc các bạn cũng đã biết là margin có thể sử dụng ở 4 hướng (top right bottom left), và chúng ta nên nắm rõ những thứ cơ bản này để có thể áp dụng chúng tốt vào trong dự án thực tế được.Vấn đề margin collapseHiểu đơn giản là 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 cái còn lại. Trong trường hợp này thằng nào có margin lớn hơn sẽ được sử dụng và thằng còn lại sẽ
bị bỏ qua. Các bạn xem hình
nhé.
Các bạn thấy phần tử ở trên có margin-bottom: 50px và
thằng ở dưới có margin-top: 30px thì khoảng cách lúc này không phải là 80px như các bạn nghĩ đâu mà là 50px do thằng ở trên có margin lớn hơn, và điều đó tạo nên một thứ chính là margin collapse.Và để giải quyết vấn đề này thì người ta khuyến khích chỉ sử dụng một một hướng mà thôi ví dụ các bạn muốn khoảng cách giữa chúng là 80px thì chỉ cần dùng margin-bottom: 80px là đủ, tuy nhiên nếu code .element {margin-bottom: 80px} thì cái cuối cùng sẽ có khoảng trống dư thừa cho nên để fix
cái này chúng ta sẽ dùng :not(:last-child)
.element:not(:last-child){margin-bottom:80px;}
Một ví dụ khác nữa cũng khá thú vị đó là mối quan hệ giữa phần tử cha và con bên trong. Giả sử ta có HTML và CSS như sau
Các bạn thấy rằng phần tử con
có margin: 50px 0 nhưng lại không cách ra phía trên so với phần tử cha bao ngoài, đó là vì margin collapse của thằng cha gây ảnh hưởng lên thằng con. Để giải quyết trường hợp này thì chúng ta có thể CSS cho thằng con thành display: inline-block hoặc hay hơn là thiết lập cho thằng cha padding-top: 50px chẳng hạn là
ok.Negative MarginTức là sử dụng số âm trong giá trị của margin. Nó thật sự hữu ích trong nhiều trường hợp giả sử mình có cấu trúc giao diện như hình với padding
bao quanh, làm cho phần tử con bị thu
vào.Nhưng cái chúng ta muốn là
phần tử con rộng 100% của phần tử cha nhưng không được bỏ padding của phần tử cha đi thì phải làm sao. Lúc này negative margin sẽ là cứu tinh cho chuyện này, do phần tử cha có padding: 1rem nó đẩy phần tử con vào, cho nên lúc này ở phần tử con mình cho margin số âm top left và right giá trị ngược lại 1rem là -1rem để nó giãn ra 100% của phần tử cha và dính trên cùng.
Padding – Inner SpacingNhư mình đã nói từ lúc đầu thì padding hay còn gọi là inner bên trong phần tử. Nó thì được sử
dụng ở nhiều trường hợp lắm. Ví dụ như hình dưới đây minh hoạ khi chúng ta dùng padding cho thẻ a để phạm vi click của thẻ a được mở rộng
hơnPadding không hoạt độngCó một điều quan trọng là padding top và padding-bottom sẽ không hoạt
động nếu phần tử các bạn đang làm có display: inline như là thẻ hay là thẻ . Nếu padding được thêm vào nó sẽ không ảnh hưởng tới phần tử. Để giải quyết vấn đề này thì các bạn có thể dùng thuộc tính display với giá trị khác như là inline-block hoặc block là oke thôi.
Một vài ví dụ thực tếXử lý với margin bottomGiả sử chúng ta có một layout như thế
này, và mỗi phần tử đều có margin-bottom: 20px và các bạn thấy rằng phần tử cuối cũng có như vậy là sai vì ở đây mình chỉ muốn khoảng cách giữa các phần tử mà thôi chứ cái cuối cùng không
có.
Vậy làm sao để giải quyết trường hợp này ? Chúng ta sẽ dùng :not(:last-child) như sau
.element:not(:last-child){margin-bottom:20px;}
Tuy nhiên cách này chỉ chạy đúng khi hiển thị một cột, nhưng nếu giao diện là 2 cột thì lúc này nó không hề đúng, ở đây là cái số 4 vẫn có margin
bottom
Và một cách tốt nhất để giải quyết nó là ở thằng cha bọc ngoài cho margin-bottom số âm bằng chính margin bottom của thằng con như sau
.wrapper {margin-bottom:-20px;}
Card ComponentVí dụ chúng ta có hình như thế này, làm sao nhìn vào một một giao diện đơn giản như này thì chúng ta phân biệt được ở đâu xài margin, ở đâu xài
padding.
Và hình dưới đây sẽ cho bạn thấy, bạn có nghĩ giống mình không
nào?
Tạm kết về spacingHi vọng với những
kiến thức cơ bản nhưng bổ ích này sẽ giúp ích cho các bạn phần nào cải thiện kiến thức nhé. Đừng quên xem demo ở đây nhé.Bài viết được tham khảo và viết lại dựa trên bài gốc của tác giả ishadeedBài viết gốc được đăng tải tại
evondev.comCó thể bạn quan tâm:
CSS trong JavaScript: Công cụ không thể thiếu cho component-based styling
Tìm hiểu về thuộc tính Writing Mode trong CSS
CSRF là gì? Tìm hiểu về CSRF và cách phòng chống tấn công hiệu quả