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.