line-height đặt chiều cao dòng
```css
p {
font-size: 20px;
line-height: 1.5;
text-align: left;
text-indent: 2em;
}
```
Đường cơ sở là đường dùng để đặt các chữ trên dòng; một số nét như phần dưới của g, p, y nằm thấp hơn đường ấy. Với các dòng có cùng cỡ và cách đặt trong ví dụ, line-height giúp xác định khoảng giữa các đường cơ sở.
p có cỡ 20px và line-height: 1.5, nên chiều cao dòng là 1,5 × 20 = **30px**. Đây khác cỡ chữ 20px. Giá trị mặc định của line-height là normal, tùy phông và trình duyệt, không cố định bằng 2em.
text-align căn nội dung dòng
| Giá trị | Cách căn trong đoạn văn viết từ trái sang phải |
|---|---|
| left |Căn trái|
| center |Căn giữa|
| right |Căn phải|
| justify |Căn đều hai bên; dòng cuối thường giữ theo đầu dòng|
Thuộc tính đúng là text-align. Nó căn nội dung dòng trong vùng chứa, không tự di chuyển cả hộp p vào giữa trang. Thay độ rộng vùng chứa hoặc phông có thể làm số dòng thay đổi.
text-indent tác động dòng đầu trong mẫu cơ bản
Với p cỡ 20px, text-indent: 2em tạo khoảng thụt 40px ở đầu dòng thứ nhất. Các dòng tự xuống hàng tiếp theo không nhận lại khoảng thụt ấy.
Giá trị dương đẩy dòng đầu vào; giá trị âm kéo dòng đầu lùi ra theo chiều ngược lại và cần đủ chỗ để không bị cắt. Giá trị phần trăm lấy mốc chiều rộng vùng chứa theo hướng dòng, khác mốc cỡ chữ của phần trăm trong font-size.
line-height cũng có thể ghi 2em hoặc 150%. Trong chính phần tử có cỡ 20px, hai giá trị này lần lượt cho 40px và 30px; không nhân chúng với chiều cao dòng cũ của cha.
Bài luyện
p cỡ 20px và line-height:1.5. Chiều cao dòng theo dữ kiện là bao nhiêu?
20px là cỡ chữ, chưa nhân hệ số.
Đúng. 1,5 × 20 = 30.
Số không đơn vị là hệ số, không phải 1,5px.
40px tương ứng hệ số 2 ở cỡ 20px.
Lời giải
line-height dạng số không đơn vị nhân với cỡ chữ của chính phần tử. Vì p20px nên chiều cao dòng là 1,5 × 20 = 30px.
Bài luyện
text-align:center trên p trực tiếp làm gì?
Đúng. Thuộc tính này điều khiển căn nội dung dòng.
Độ đậm do font-weight.
Căn nội dung dòng khác đặt vị trí cả hộp.
text-align không đặt cỡ chữ.
Lời giải
text-align:center căn các dòng bên trong vùng nội dung của p. Vị trí và chiều rộng hộp p là vấn đề khác; chỉ thuộc tính này chưa chứng minh cả hộp đã ở giữa màn hình.
Bài luyện
p có cỡ 20px, text-indent:2em. Khoảng thụt dòng đầu là gì?
Độ rộng kí tự phụ thuộc phông, không được suy như vậy.
2em không phải 2px ở cỡ 20px.
Đúng. 2 × 20 = 40.
text-indent dùng em theo cỡ chữ, không theo line-height: 1,5.
Lời giải
em trong text-indent dựa vào cỡ chữ của chính p. p20px nên 2em = 40px; đó là độ dài CSS, không bảo đảm bằng đúng hai kí tự của mọi phông.
Bài luyện
Trong các ví dụ cùng cỡ 20px, line-height:150% tính theo mốc nào?
Chiều rộng không phải mốc của line-height phần trăm.
Không lấy chiều cao dòng cũ của cha làm mốc.
Chiều cao màn hình không phải mốc này.
Đúng. 1,5 × 20 = 30.
Lời giải
Phần trăm của line-height dựa vào cỡ chữ của phần tử đang được định dạng. Với 20px, 150% cho 30px; không nhầm với phần trăm của text-indent hay kích thước màn hình.
Đang học