Giãn cách

Podcast CSS – 013: Khoảng cách

Giả sử bạn có một bộ sưu tập gồm ba hộp, xếp chồng lên nhau và bạn muốn có khoảng trống giữa chúng. Bạn có thể nghĩ ra bao nhiêu cách để làm điều đó trong CSS?

Thuộc tính margin có thể cung cấp cho bạn những gì bạn cần, nhưng cũng có thể tạo thêm khoảng cách mà bạn không muốn. Ví dụ: làm cách nào để bạn chỉ nhắm mục tiêu khoảng cách giữa mỗi thành phần đó? Dữ liệu như gap có thể phù hợp hơn trong trường hợp này. Có nhiều cách để điều chỉnh khoảng cách trong giao diện người dùng, mỗi loại có thế mạnh và cảnh báo riêng.

Giãn cách HTML

Bản thân HTML cung cấp một số phương thức cho các phần tử không gian. Các phần tử <br> và <hr> cho phép bạn giãn cách các phần tử theo hướng khối, nếu bạn dùng ngôn ngữ Latinh, là từ trên xuống dưới.

Nếu bạn sử dụng phần tử <br>, thì một dấu ngắt dòng giống như khi bạn nhấn phím enter trong trình xử lý văn bản.

<hr> tạo một đường ngang có khoảng trống ở hai bên, được gọi là margin.

Cùng với việc sử dụng các phần tử HTML, Thực thể HTML có thể tạo khoảng trống. Thực thể HTML là một chuỗi ký tự dành riêng được trình duyệt thay thế bằng các thực thể ký tự. Ví dụ: nếu bạn nhập © trong tệp HTML, nó sẽ được chuyển đổi thành ký tự ©. Thực thể   được chuyển đổi thành ký tự dấu cách không ngắt, tạo nên một không gian cùng dòng. Tuy nhiên, hãy cẩn thận, bởi vì khía cạnh không gây gián đoạn của nhân vật này đã nối hai yếu tố lại với nhau, từ đó dẫn đến hành vi bất thường.

Lợi nhuận

Nếu bạn muốn thêm khoảng trống ở bên ngoài một phần tử, bạn sử dụng thuộc tính margin. Lề giống như thêm khoảng đệm xung quanh phần tử. Thuộc tính margin là viết tắt của margin-top, margin-right, margin-bottom và margin-left.

Viết tắt margin áp dụng các thuộc tính theo thứ tự cụ thể: trên cùng, bên phải, dưới cùng và bên trái. Bạn có thể nhớ những mật khẩu này rất khó: TRouBLe.

Viết tắt margin cũng có thể được sử dụng với một, hai hoặc ba giá trị. Việc thêm giá trị thứ tư cho phép bạn đặt từng mặt riêng lẻ. Những cách này được áp dụng như sau:

• Một giá trị sẽ được áp dụng cho tất cả các vế. (margin: 20px).
• Hai giá trị: giá trị đầu tiên sẽ được áp dụng cho cạnh trên và cạnh dưới, và giá trị thứ hai sẽ được áp dụng cho vế trái và vế phải. (margin: 20px 40px)
• 3 giá trị: giá trị đầu tiên là top, giá trị thứ hai là left và right, và giá trị thứ ba là bottom. (margin: 20px 40px 30px).

Lề có thể được xác định bằng độ dài, phần trăm hoặc giá trị tự động, chẳng hạn như 1em hoặc 20%. Nếu dùng tỷ lệ phần trăm, giá trị sẽ được tính dựa trên chiều rộng của khối chứa phần tử của bạn.

Điều này có nghĩa là nếu khối chứa phần tử của bạn có chiều rộng là 250px và phần tử của bạn có giá trị margin là 20%: mỗi cạnh của phần tử sẽ có lề đã tính là 50px.

Bạn cũng có thể sử dụng giá trị auto cho lợi nhuận. Đối với các phần tử cấp khối có kích thước hạn chế, lề auto sẽ chiếm không gian có sẵn theo hướng được áp dụng. Một ví dụ điển hình là trường hợp này, từ mô-đun flexbox, nơi các mục tách ra khỏi nhau.

Một ví dụ điển hình khác về lề auto là trình bao bọc ở giữa theo chiều ngang có chiều rộng tối đa. Loại trình bao bọc này thường dùng để tạo một cột trung tâm nhất quán trên trang web.

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

Ở đây, lề được xóa khỏi phía trên cùng và dưới cùng (khối), và auto chia sẻ không gian giữa hai bên trái và phải (cùng dòng).

Lề âm

Bạn cũng có thể sử dụng giá trị âm cho lề. Thay vì thêm khoảng cách giữa các phần tử đồng cấp liền kề, thì sẽ giảm khoảng cách giữa chúng. Điều này có thể dẫn đến các phần tử chồng chéo, nếu bạn khai báo một giá trị âm lớn hơn không gian có sẵn.

Thu gọn lợi nhuận

Thu gọn lợi nhuận là một khái niệm phức tạp, nhưng đây là việc bạn sẽ rất thường gặp khi xây dựng giao diện. Giả sử bạn có hai thành phần: tiêu đề và một đoạn văn đều có lề dọc:

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>

h1 {
    margin-bottom: 2rem;
}

p {
    margin-top: 3rem;
}

Khi mới nhìn qua, bạn sẽ được tha thứ nếu cho rằng đoạn văn bản này sẽ được giãn cách 5em so với tiêu đề, vì 2rem và 3rem cộng lại được tính cho 5rem. Tuy nhiên, vì lề dọc thu gọn, không gian thực ra là 3rem.

Tính năng thu gọn lợi nhuận hoạt động bằng cách chọn giá trị lớn nhất của hai phần tử liền kề nhau với lề dọc được đặt ở các cạnh liền kề. Điểm đáy của h1 giao với đầu p, do đó, giá trị lớn nhất của lề dưới cùng h1 và lề trên của p được chọn. Nếu h1 có lề dưới là 3.5rem, khoảng cách giữa cả hai sẽ là 3.5rem vì lớn hơn 3rem. Chỉ thu gọn lề của khối, không phải lề cùng dòng (ngang).

Thu gọn lề cũng giúp ích cho các phần tử trống. Nếu bạn có một đoạn có lề trên và lề dưới là 20px, thì sẽ chỉ tạo 20px không gian: chứ không phải 40px. Nếu bạn thêm bất cứ thứ gì vào bên trong phần tử này, bao gồm padding, lề của nó sẽ không tự thu gọn nữa và sẽ được coi là bất kỳ hộp nào có nội dung.

Kiểm tra kiến thức

Kiểm tra kiến thức về việc thu gọn lợi nhuận

Tránh thu gọn lề

Nếu bạn tạo một phần tử có vị trí tuyệt đối, bằng cách sử dụng position: absolute, thì lề sẽ không còn thu gọn nữa. Lề cũng sẽ không thu gọn nếu bạn sử dụng thuộc tính float.

Nếu bạn có một phần tử không có lề giữa hai phần tử có lề khối, lề cũng sẽ không thu gọn vì 2 phần tử có lề khối không còn là thành phần đồng cấp liền kề nữa: chúng chỉ là hai phần tử đồng cấp.

Trong bài học về bố cục, bạn đã biết rằng vùng chứa flexbox và lưới rất giống với vùng chứa dạng khối, nhưng xử lý các phần tử con rất khác nhau. Trường hợp này cũng áp dụng với tính năng thu gọn lợi nhuận.

Nếu chúng ta lấy ví dụ ban đầu từ bài học và áp dụng hộp linh hoạt với hướng cột, các lề được kết hợp với nhau, thay vì thu gọn. Điều này có thể cung cấp khả năng dự đoán công việc bố cục, đó là mục tiêu mà các vùng chứa flexbox và lưới được thiết kế.

Lợi nhuận và thu gọn lợi nhuận có thể khó hiểu, nhưng việc hiểu chi tiết cách hoạt động của các tính năng này sẽ rất hữu ích, phần giải thích chi tiết này bạn nên sử dụng.

Khoảng đệm

Thay vì tạo không gian bên ngoài hộp của bạn, giống như margin, thay vào đó, thuộc tính padding sẽ tạo không gian ở bên trong hộp: chẳng hạn như lớp cách ly.

Tuỳ thuộc vào kiểu hộp bạn đang sử dụng—đã được đề cập trở lại trong bài học về mô hình hộp – padding cũng có thể ảnh hưởng đến kích thước tổng thể của phần tử.

Thuộc tính padding là viết tắt của padding-top, padding-right, padding-bottom và padding-left. Tương tự như margin, padding cũng có các thuộc tính logic: padding-block-start, padding-inline-end, padding-block-end và padding-inline-start.

Xác lập vị thế

Cũng được đề cập trong mô-đun bố cục, nếu bạn đặt giá trị cho position khác với static, bạn có thể giãn cách các phần tử bằng các thuộc tính top, right, bottom và left. Có một số điểm khác biệt về cách hoạt động của các giá trị định hướng này:

• Phần tử có position: relative sẽ giữ nguyên vị trí trong luồng tài liệu, ngay cả khi bạn đặt các giá trị này. Chúng cũng sẽ tương ứng với vị trí của phần tử.
• Một phần tử có position: absolute sẽ dựa trên các giá trị có hướng từ vị trí của thành phần mẹ tương đối.
• Một phần tử có position: fixed sẽ dựa trên các giá trị hướng trên khung nhìn.
• Một phần tử có position: sticky sẽ chỉ áp dụng các giá trị hướng khi nó ở trạng thái gắn vào đế/mắc kẹt.

Trong mô-đun thuộc tính logic, bạn sẽ tìm hiểu về các thuộc tính inset-block và inset-inline, cho phép bạn đặt các giá trị hướng phù hợp với chế độ viết.

Cả hai thuộc tính đều là cách viết tắt kết hợp các giá trị start và end và do đó, chấp nhận một giá trị sẽ được đặt cho start và end hoặc hai giá trị riêng lẻ.

Lưới và hộp linh hoạt

Cuối cùng, trong cả lưới và hộp linh hoạt, bạn đều có thể sử dụng thuộc tính gap để tạo không gian giữa các phần tử con. Thuộc tính gap là viết tắt của row-gap và column-gap, nó chấp nhận một hoặc hai giá trị, có thể là độ dài hoặc tỷ lệ phần trăm. Bạn cũng có thể sử dụng các từ khoá như unset, initial và inherit. Nếu bạn chỉ xác định một giá trị, cùng một gap sẽ được áp dụng cho cả hàng và cột, nhưng nếu bạn xác định cả hai giá trị, giá trị đầu tiên là row-gap và giá trị thứ hai là column-gap.

Với cả hộp linh hoạt và lưới, bạn cũng có thể tạo không gian bằng cách sử dụng khả năng phân phối và căn chỉnh của chúng, mà chúng tôi đề cập trong mô-đun lưới và mô-đun flexbox.

Tạo khoảng cách nhất quán

Chọn một chiến lược và theo sát chiến lược đó là việc nên làm để tạo giao diện người dùng nhất quán, có tiến trình và nhịp điệu tốt. Một cách hay để làm việc này là sử dụng các biện pháp nhất quán để giãn cách.

Ví dụ: bạn có thể cam kết sử dụng 20px là một biện pháp nhất quán cho tất cả các khoảng trống giữa các thành phần (được gọi là rãnh), do đó tất cả bố cục đều có giao diện nhất quán. Bạn cũng có thể quyết định sử dụng 1em làm khoảng cách theo chiều dọc giữa nội dung luồng, để đạt được khoảng cách nhất quán dựa trên font-size của phần tử. Dù bạn chọn cách nào, bạn nên lưu các giá trị này dưới dạng biến (hoặc thuộc tính tùy chỉnh CSS) để mã hoá các giá trị đó và giúp tính nhất quán dễ dàng hơn một chút.

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

Việc sử dụng thuộc tính tuỳ chỉnh như thế này cho phép bạn xác định chúng một lần, sau đó sử dụng chúng trong toàn bộ CSS của bạn. Khi được cập nhật, cục bộ trong một phần tử hoặc trên toàn cục, các giá trị sẽ được chuyển xuống qua tầng và các giá trị đã cập nhật sẽ được phản ánh.

Kiểm tra kiến thức

Kiểm tra kiến thức về dấu cách