Sử dụng Thuộc tính chiều cao dòng CSS để có được khoảng cách dòng CSS
Tìm hiểu cách sử dụng chiều cao dòng thuộc tính CSS kiểu để ảnh hưởng đến khoảng cách dòng trên các trang Web của bạn.
Giá trị của khoảng cách dòng CSS
Khoảng cách dòng CSS bị ảnh hưởng bởi chiều cao dòng thuộc tính CSS. Thuộc tính này có tối đa 5 giá trị khác nhau:
- bình thường: trình duyệt xác định giá trị cho khoảng cách dòng có liên quan đến kích thước phông chữ. Điều này thường giống với kích thước phông chữ hoặc lớn hơn một chút (như 20%).
- kế thừa: khoảng cách dòng phải được lấy từ khoảng cách dòng của phần tử gốc. Vì vậy, nếu bạn đặt chiều cao dòng của thẻ body của bạn lớn hơn 30% so với kích thước phông chữ và các thẻ đoạn bên trong được đặt thành kế thừa, chúng cũng sẽ có chiều cao dòng lớn hơn 30% so với kích thước phông chữ.
- một số: Nếu giá trị độ cao dòng không có đơn vị đo lường, nó được coi là một số nhân trên kích thước phông chữ cho chiều cao dòng. Vì vậy, chiều cao dòng 1,25 sẽ lớn hơn 25% so với kích thước phông chữ.
- độ dài: Nếu giá trị độ cao dòng có đơn vị đo lường, đó là số lượng khoảng trống chính xác phải có giữa các dòng. Vì vậy, 1.25mm sẽ dẫn đến các đường cách nhau 1,25 mm.
- tỷ lệ phần trăm: Nếu chiều cao dòng là phần trăm, đó sẽ là phần trăm kích thước phông chữ. Vì vậy, chiều cao dòng 125% sẽ lớn hơn 25% so với kích thước phông chữ.
Bạn nên sử dụng giá trị nào cho khoảng cách dòng CSS
Trong hầu hết các trường hợp, lựa chọn tốt nhất cho khoảng cách dòng là để nó ở chế độ mặc định - hoặc "bình thường". Điều này nói chung là dễ đọc nhất và không yêu cầu bạn làm bất cứ điều gì đặc biệt. Nhưng thay đổi khoảng cách dòng có thể cung cấp cho văn bản của bạn một cảm giác khác với nó.
Nếu kích thước phông chữ của bạn được xác định là ems hoặc phần trăm, chiều cao dòng của bạn cũng phải được xác định theo cách đó. Đây là hình thức linh hoạt nhất của khoảng cách dòng bởi vì nó cho phép người đọc thay đổi kích thước phông chữ của họ và giữ tỷ lệ tương tự trên khoảng cách dòng của bạn.
Đặt chiều cao dòng cho các tờ định kiểu in với giá trị điểm (pt). Điểm chính là thước đo in và do đó kích thước phông chữ của bạn cũng phải ở trong điểm.
Tôi không thích sử dụng lựa chọn số vì tôi thấy rằng điều đó gây nhầm lẫn với mọi người. Nhiều người nghĩ rằng con số này là một kích thước tuyệt đối, và vì vậy họ làm cho nó rất lớn. Ví dụ, bạn có thể đặt phông chữ ở 14px và sau đó bạn đặt chiều cao dòng thành 14 - kết quả là khoảng trống lớn giữa các dòng - vì khoảng cách dòng được đặt thành 14 lần kích thước phông chữ.
Bao nhiêu không gian bạn nên sử dụng cho khoảng cách dòng của bạn
Như tôi đã đề cập ở trên, tôi khuyên bạn nên sử dụng khoảng cách dòng mặc định trừ khi bạn có lý do cụ thể để thay đổi nó. Thay đổi khoảng cách dòng có thể có các hiệu ứng khác nhau:
- Văn bản rất chặt chẽ với nhau có thể khó đọc. Nhưng không gian dòng nhỏ có thể ảnh hưởng đến tâm trạng của văn bản. Nếu văn bản được nhét lại với nhau, nó có thể làm cho cảm giác của văn bản có vẻ tối hơn hoặc căng thẳng hơn.
- Văn bản xa hơn cũng có thể khó đọc. Nhưng không gian đường rộng làm cho văn bản dường như trôi chảy và trôi chảy hơn.
- Thay đổi khoảng cách dòng có thể làm cho văn bản mà nếu không sẽ không phù hợp trong một không gian nhỏ gọn hơn hoặc chiếm nhiều không gian hơn trong thiết kế của bạn.