Khoảng trống - Thủ thuật CSS

Thuộc tính gap trong CSS là cách viết tắt của row-gapvà column-gap, chỉ định kích thước của máng xối, là khoảng cách giữa các hàng và cột trong bố cục lưới, linh hoạt và nhiều cột.

/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )

Sử dụng thanh trượt trong bản trình diễn bên dưới để xem thuộc gaptính đang hoạt động:

Cú pháp

gap chấp nhận một hoặc hai giá trị:

• Một giá trị duy nhất đặt cả hai row-gapvà column-gaptheo cùng một giá trị.
• Khi hai giá trị được sử dụng, giá trị đầu tiên đặt giá trị và giá trị row-gapthứ hai đặt giá trị column-gap.

.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )

Đặc tả cho Mô-đun bố cục lưới CSS đã xác định khoảng cách giữa các đường lưới bằng cách sử dụng thuộc grid-gaptính. gapnhằm mục đích thay thế nó để các khoảng trống có thể được xác định trong nhiều phương pháp bố cục CSS, như flexbox, nhưng grid-gapvẫn cần được sử dụng trong các trường hợp mà trình duyệt có thể đã triển khai grid-gapnhưng vẫn chưa bắt đầu hỗ trợ thuộc tính mới hơn gap.

Giá trị

gap chấp nhận các giá trị sau:

• normal: (Mặc định) Trình duyệt sẽ chỉ định giá trị được sử dụng là 1em cho bố cục nhiều cột và 0px cho tất cả các ngữ cảnh bố cục khác (tức là lưới và linh hoạt).
• : Bất kỳ hợp lệ và không âm dài CSS, chẳng hạn như px, em, remvà %, trong số những người khác.
• : Kích thước của khoảng trống dưới dạng giá trị phần trăm không âm liên quan đến kích thước của phần tử. (Xem chi tiết bên dưới.)
• initial: Áp dụng cài đặt mặc định của thuộc tính, đó là normal.
• inherit: Thông qua giá trị khoảng trống của cha mẹ.
• unset: Loại bỏ dòng điện gapkhỏi phần tử.

Phần trăm trong thuộc tính khoảng trống

Khi kích thước của vùng chứa trong thứ nguyên khoảng trống được xác định, gapsẽ giải quyết tỷ lệ phần trăm so với kích thước của hộp nội dung của vùng chứa trong bất kỳ kiểu bố cục nào.

Nói cách khác, khi trình duyệt biết kích thước của vùng chứa, nó có thể tính toán giá trị phần trăm của gap. Ví dụ: khi chiều cao của vùng chứa là 100px và gapđược đặt thành 10%, trình duyệt biết rằng 10% của 100px là 10px.

Nhưng khi trình duyệt không biết kích thước, nó sẽ tự hỏi, "10% của cái gì?" Trong những trường hợp này, gaphoạt động khác nhau dựa trên kiểu bố cục.

Trong bố cục lưới, tỷ lệ phần trăm giải quyết bằng 0 để xác định đóng góp kích thước nội tại, nhưng phân giải theo hộp nội dung của phần tử khi bố trí nội dung của hộp, có nghĩa là nó sẽ đặt khoảng cách giữa các mục nhưng khoảng trống không ảnh hưởng đến kích thước của vùng chứa.

Trong bản trình diễn này, chiều cao của vùng chứa không được xác định. Xem điều gì sẽ xảy ra khi bạn tăng gapkích thước. Sau đó đặt gapđơn vị pixel và thử lại:

Trong bố cục linh hoạt, tỷ lệ phần trăm giải quyết bằng 0 trong mọi trường hợp, có nghĩa là khoảng trống sẽ không áp dụng khi kích thước của vùng chứa không được trình duyệt biết:

Sử dụng hàm calc () với khoảng trống

Bạn có thể sử dụng calc()chức năng để chỉ định kích thước của gapnhưng tại thời điểm viết bài này, không có hỗ trợ nào cho nó trên Safari và iOS.

.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); ) 
 .grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )

Ví dụ

Các gapbất động sản được thiết kế để sử dụng trong lưới, flex và nhiều cột bố trí. Hãy kiểm tra một số ví dụ.

Bố cục lưới

Trong bản trình diễn sau, bạn có thể thấy gapviệc được sử dụng để chỉ định các thuộc tính row-gapvà column-gapthuộc tính trên vùng chứa lưới, xác định các rãnh giữa các hàng lưới và cột lưới, tương ứng:

Bố cục linh hoạt

Áp dụng khoảng trống cho trục chính của thùng chứa flex cho biết khoảng cách giữa các mục flex trong một dòng duy nhất của bố cục flex.

Đây column-gapđược sử dụng theo hướng hàng:

Đây row-gapđược sử dụng theo hướng cột:

Áp dụng gapcho trục chéo của vùng chứa flex cho biết khoảng cách giữa các đường flex của bố cục flex.

Đây là row-gapmột hướng hàng:

Đây là column-gaphướng cột:

Bố cục nhiều cột

column-gapxuất hiện trong bố cục nhiều cột để tạo khoảng trống giữa các hộp cột, nhưng lưu ý rằng điều đó row-gapkhông ảnh hưởng gì vì chúng tôi chỉ làm việc trong các cột. gapvẫn có thể được sử dụng trong ngữ cảnh này, nhưng chỉ column-gapsẽ được áp dụng.

Như bạn có thể thấy trong bản demo tiếp theo, mặc dù thuộc gaptính có giá trị là 2rem, nhưng nó chỉ tách các mục theo chiều ngang thay vì cả hai hướng vì chúng tôi đang làm việc trong các cột:

Bạn càng biết nhiều…

Có một số điều đáng lưu ý khi làm việc với gaptài sản.

Đó là một cách hay để ngăn chặn khoảng cách không mong muốn

Bạn đã bao giờ sử dụng lề để tạo khoảng cách giữa các phần tử chưa? Nếu chúng ta không cẩn thận, chúng ta có thể có thêm khoảng cách trước và sau nhóm mục.

Việc giải quyết vấn đề đó thường yêu cầu thêm lề âm hoặc sử dụng bộ chọn giả để loại bỏ lề khỏi các mục cụ thể. Nhưng điều tốt đẹp khi sử dụng gaptrong các phương pháp bố trí hiện đại hơn là bạn chỉ có khoảng trống giữa các mục. Rắc rối thêm ở đầu và cuối không bao giờ là một vấn đề!

Tuy nhiên, này, nếu bạn muốn có không gian xung quanh các mục trong khi sử dụng gap, hãy đặt paddingxung quanh thùng chứa như sau:

.container ( display: flex; gap: 1rem; padding: 1rem; )

Kích thước máng xối không phải lúc nào cũng bằng giá trị khe hở

Tài gapsản không phải là thứ duy nhất có thể đặt khoảng trống giữa các món đồ. Lề, đệm justify-contentvà align-contentcũng có thể làm tăng kích thước của máng xối và ảnh hưởng đến gapgiá trị thực tế .

Trong ví dụ sau, chúng tôi đang đặt 1em gapnhưng, như bạn có thể thấy, có nhiều khoảng trống hơn giữa các mục, do việc sử dụng các căn chỉnh phân tán, như justify-contentvà align-content:

Hỗ trợ trình duyệt

Truy vấn tính năng thường là một cách hay để kiểm tra xem trình duyệt có hỗ trợ một thuộc tính cụ thể hay không, nhưng trong trường hợp này, nếu bạn kiểm tra thuộc gaptính trong flexbox, bạn có thể nhận được kết quả dương tính giả vì truy vấn tính năng sẽ không phân biệt giữa các chế độ bố cục. Nói cách khác, nó có thể được hỗ trợ trong một bố cục linh hoạt mang lại kết quả tích cực, nhưng nó thực sự không được hỗ trợ nếu nó được sử dụng trong một bố cục lưới.

Bố cục lưới

I E	Cạnh	Firefox	Trình duyệt Chrome	Safari	Opera
Không	16+	61+	66+	12+	53+

iOS Safari	Opera Mobile	Trình duyệt Android	Chrome dành cho Android	Firefox dành cho Android
12+	Không	81+	84+	68+

Bố cục lưới với các giá trị calc ()

I E	Cạnh	Firefox	Trình duyệt Chrome	Safari	Opera
Không	84+	79+	84+	Không	69+

iOS Safari	Opera Mobile	Trình duyệt Android	Chrome dành cho Android	Firefox dành cho Android
Không	Không	81+	84+	68+

Bố cục lưới với giá trị phần trăm

I E	Cạnh	Firefox	Trình duyệt Chrome	Safari	Opera
Không	84+	79+	84+	Không	69+

iOS Safari	Opera Mobile	Trình duyệt Android	Chrome dành cho Android	Firefox dành cho Android
Không	Không	81+	84+	68+

Bố cục linh hoạt

Đặc điểm kỹ thuật để sử dụng gapvới flexbox hiện đang ở trạng thái Bản nháp.

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome	Firefox	I E	Cạnh	Safari
84	63	Không	84	TP.

Di động / Máy tính bảng

Chrome dành cho Android	Android Firefox	Android	iOS Safari
88	85	Không	Không

Bố cục nhiều cột

I E	Cạnh	Firefox	Trình duyệt Chrome	Safari	Opera
Không	84+	79+	84+	Không	69+

iOS Safari	Opera Mobile	Trình duyệt Android	Chrome dành cho Android	Firefox dành cho Android
Không	Không	81+	84+	68+

Thêm thông tin

• Mô-đun căn chỉnh hộp CSS cấp 3
• Chromium đạt được khoảng trống Flexbox (Số vé 761904)
• Trạng thái tính năng CSS WebKit

Có liên quan

• Bố cục lưới
• Bố cục Flexbox
• Bố cục nhiều cột