Css khoảng cách giữa các div

Khi chúng ta code bối cảnh cho một dự án nào đó chẳng hạn, các các bạn sẽ thấy rằng để gia công khoảng giải pháp giữa các phần tử thì sẽ có rất nhiều cách như margin hoặc padding xuất xắc gọi thông thường là spacing. Mặc dù mình thấy đa số chúng ta mới học thì tốt bị rối giữa những việc dùng 2 máy này, bây giờ mình lại liên tiếp research tìm ngôn từ về nó để viết cho những bạn, hi vọng để giúp ích được cho các bạn phần nào trong việc nâng cấp kiến thức hơn, tiếp liền hơn về spacing để có thể cai quản việc code tốt hơn.

Bạn đang xem: Css khoảng cách giữa các div

# các loại spacing

Như bản thân đã nói ở trên thì trong CSS tất cả 2 một số loại spacing đó đó là outer-space cùng inner-space mà bọn họ hay gặp. Trong nội dung bài viết này mình điện thoại tư vấn tạm là outer cùng inner cho dễ dàng nắm bắt nhé. Ví dụ như hình tiếp sau đây khoảng trống bên phía ngoài là outer và bên trong là inner.

*

Ví dụ làm việc trên gồm class là element đi thì chúng ta cũng có thể có CSS đơn giản và dễ dàng như này với inner là padding với 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òa 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é.

# Margin

Margin thường được sử dụng khi các bạn có nhu cầu tạo khoảng cách giữa bộ phận này so với các phần tử khác. Như ví dụ sinh sống trên thì mình tất cả dùng margin-bottom: 20px để chế tạo ra khoảng cách so cùng với phần tử ở dưới.

Chắc chúng ta cũng sẽ biết là margin hoàn toàn có thể sử dụng ở bốn hướng (top right bottom left), và bọn họ nên nắm rõ những lắp thêm cơ bạn dạng này để hoàn toàn có thể áp dụng chúng tốt vào vào dự án thực tế được.

Vấn đề margin collapse

Hiểu dễ dàng là margin collapse xảy ra khi họ có 2 bộ phận nằm mặt hàng dọc và có margin cùng một trong các chúng bao gồm margin lớn hơn cái còn lại. Trong trường phù hợp này thằng nào tất cả margin to hơn sẽ được sử dụng và thằng còn lại có khả năng sẽ bị bỏ qua. Các bạn xem hình nhé.

Xem thêm: Các Diễn Viên Trong Phim 12 Năm Xa Cách, 12 Năm Xa Cách

*

Các các bạn thấy phần tử ở trên có margin-bottom: 50px và thằng sống dưới bao gồm margin-top: 30px thì khoảng cách bây giờ không buộc phải là 80px như các bạn nghĩ đâu nhưng mà là 50px vì chưng thằng sinh sống trên tất cả margin mập hơn, và điều đó tạo bắt buộc một thứ đó là margin collapse.

Và để giải quyết vấn đề này thì tín đồ ta khuyến khích chỉ sử dụng một một phía mà thôi ví dụ các bạn có nhu cầu khoảng cách giữa bọn 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 ở đầu cuối sẽ có tầm khoảng trống dư thừa vì thế để fix cái này họ sẽ cần sử dụng :not(:last-child).element:not(:last-child) margin-bottom: 80px;Một ví dụ không giống nữa cũng rất thú vị đó là mối quan hệ giữa phần tử cha và con bên trong. đưa sử ta gồm HTML cùng CSS như sau
.parent margin: 50px tự động 0 auto; width: 400px; height: 120px;.child margin: 50px 0;

*

Các các bạn thấy rằng bộ phận con bao gồm margin: 50px 0 tuy thế lại không bí quyết ra bên trên so với bộ phận cha bao ngoài, đó bởi vì margin collapse của thằng phụ vương gây tác động lên thằng con. Để giải quyết và xử lý trường phù hợp này thì chúng ta cũng có thể CSS mang lại thằng bé thành display: inline-block hoặc giỏi hơn là tùy chỉnh cấu hình cho thằng cha padding-top: 50px chẳng hạn là ok.

Negative Margin

Tức là sử dụng số âm trong quý hiếm của margin. Nó thiệt sự hữu ích trong nhiều trường hợp mang sử mình có cấu tạo giao diện như hình cùng với padding bao quanh, có tác dụng cho bộ phận 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 mà lại không được bỏ padding của bộ phận cha đi thì buộc phải làm sao. Từ bây giờ negative margin sẽ là cứu giúp tinh cho việc này, do thành phần cha có padding: 1rem nó đẩy phần tử con vào, mang đến nên từ bây giờ ở bộ phận con mình cho margin số âm top left với right giá trị ngược lại 1rem là -1rem để nó giãn ra 100% của phần tử cha với dính trên cùng..parent padding: 1rem.child margin-left: -1rem; margin-right: -1rem; margin-top: -1rem;

*

# Padding – Inner Spacing

Như mình đã nói từ thuở đầu thì padding hay còn được gọi là inner bên trong phần tử. Nó thì được áp dụng ở những trường hòa hợp lắm. Ví dụ như hình dưới đây minh hoạ khi chúng ta dùng padding mang đến thẻ a để phạm vi click của thẻ a được không ngừng mở rộng hơn

*

Padding không hoạt động

Có một điều quan trọng đặc biệt là padding top và padding-bottom đang không chuyển động nếu bộ phận các ai đang làm tất cả display: inline như là thẻ  hay là thẻ  . Ví như padding được cung cấp nó đã không tác động tới phần tử. Để giải quyết và xử lý vấn đề này thì các bạn cũng có thể dùng ở trong tính display với mức giá trị khác ví như là inline-block hoặc block là oke thôi..element span display: inline-block; padding-top: 1rem; padding-bottom: 1rem;

# Một vài lấy một ví dụ thực tế

Xử lý với margin bottom

Giả sử bọn họ có một layout như vậy này, cùng mỗi phần tử đều bao gồm margin-bottom: 20px và các bạn thấy rằng phần tử cuối cũng đều có như vậy là không nên vì ở chỗ này mình chỉ muốn khoảng cách giữa các thành phần mà thôi chứ cái sau cùng không có.

*

Vậy làm sao để xử lý trường hòa hợp này ? bọn họ sẽ cần sử dụng :not(:last-child) như sau.element:not(:last-child) margin-bottom: 20px;Tuy nhiên bí quyết này chỉ chạy đúng lúc hiển thị một cột, cơ mà nếu đồ họa là 2 cột thì lúc này nó không thể đúng, ở đó là cái số 4 vẫn có margin bottom

*

Và một cách rất tốt để xử lý nó là ở thằng phụ vương bọc ngoại trừ cho margin-bottom số âm bằng chính margin bottom của thằng nhỏ như sau.wrapper margin-bottom: -20px;

Card Component

Ví dụ chúng ta có trong khi thế này, làm sao nhìn vào trong 1 một giao diện dễ dàng và đơn giản như này thì bọn họ phân biệt được ở chỗ nào xài margin, chỗ nào xài padding.

*

Và hình dưới đây sẽ cho bạn thấy, bạn có nghĩ như là mình ko nào?

*

*

.card__content padding: 10px;.card__title,.card__author,.card__rating margin-bottom: 10px;Với code như này ta có hiệu quả như trên, tuy nhiên chỗ card__meta có border phía trên bây giờ ta hoàn toàn có thể code như sau.card__meta padding-top: 10px; border-top: 1px solid #e9e9e9;Tuy nhiên kết qủa lại ra không giống như mong đợi, vì vì padding của content bao ko kể làm mẫu border bị thụt vào bên phía trong như hình

*

Lúc này ta nhanh trí nghĩ về ra bí quyết dùng margin số âm đến nó lấy ra lại như bản thân đã trình diễn trước kia như sau.card__meta padding-top: 10px; border-top: 1px solid #e9e9e9; margin: 0 -10px;Nhưng được dòng border nhưng nội dung lại dính tiếp giáp lề, hết lỗi này đến lỗi khác

*

Để xử lý vấn đề này, các bạn chỉ cần thêm padding left và right vào card__meta là sẽ được kết quả tuyệt vời thôi..card__meta padding: 10px 10px 0 10px; border-top: 1px solid #e9e9e9; margin: 0 -10px;

*

# nhất thời kết

Hi vọng cùng với những kỹ năng và kiến thức cơ bản nhưng bổ ích này để giúp ích cho chúng ta phần nào nâng cao kiến thức nhé. Đừng quên xem demo tại chỗ này nhé..