Làm thế nào để đặt một phần tử đoạn trống lên chiều cao của kích thước phông chữ?
Nếu một yếu tố đoạn văn trống, nó không có chiều cao. Làm thế nào để đặt chiều cao tối thiểu thành chiều cao văn bản [kích thước phông chữ]?
Tôi biết bạn có thể thêm
:root {
--p-height: 20px;
}
p {
color: white;
background: green;
min-height:var[--p-height];
}
0 vào phần tử, nhưng tôi muốn đặt nó hoàn toàn bằng CSSĐã hỏi ngày 31 tháng 5 lúc 12:08May 31 at 12:08
Bạn có thể sử dụng một khoảng trắng trong một yếu tố giả. Điều này sẽ hoạt động:
p::after {
content: '\00a0 '
}
Bản demo trực tiếp tại đây: //jsfiddle.net/o96swntm/
Đã trả lời ngày 31 tháng 5 lúc 12:17May 31 at 12:17
Sẽ sẽWill
1.0931 Huy hiệu vàng9 Huy hiệu bạc21 Huy hiệu đồng1 gold badge9 silver badges21 bronze badges
7
Bạn có thể chỉ định độ cao P min thường xuyên trong CSS var.min-height in a css var.
:root {
--p-height: 20px;
}
p {
color: white;
background: green;
min-height:var[--p-height];
}
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
Đã trả lời ngày 31 tháng 5 lúc 12:34May 31 at 12:34
Maik Lowreymaik LowreyMaik Lowrey
12.2k4 Huy hiệu vàng19 Huy hiệu bạc53 Huy hiệu đồng4 gold badges19 silver badges53 bronze badges
Thử sử dụng
p:empty {
height: 14px;
}
Đã trả lời ngày 31 tháng 5 lúc 12:19May 31 at 12:19
1
- Thuộc tính line-height được hỗ trợ trong đa số các trình duyệt.
- Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
- Trang chủ
- Tham khảo
Tham khảo
CSS
Định nghĩa và sử dụng
":empty" chọn thành phần rỗng, không chứa text hay thành phần khác.
Cấu trúc
Hiển thị trình duyệt khi chưa có CSS: | HỌC WEB CHUẨN HTML - HyperText Markup Language XHTML - Extensible HyperText Markup Language CSS - Cascading Style Sheets JS - JavaScript | CSS viết: | Hiển thị trình duyệt khi có CSS: |
Trình duyệt hỗ trợ | Thuộc tính line-height được hỗ trợ trong đa số các trình duyệt. | Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype | |
Khoảng cách | line-height: 2px; | Tăng hoặc giảm khoảng cách giữa các dòng, đơn vị có thể là px, em, %, ... | |
inherit | line-height: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha [thành phần bao ngoài]. |
Ví dụ
HTML viết:
HỌC WEB CHUẨN
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript
Hiển thị trình duyệt khi chưa có CSS:
HỌC WEB CHUẨN HTML - HyperText Markup Language XHTML - Extensible HyperText Markup Language CSS - Cascading Style Sheets JS - JavaScript
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript
CSS viết:
Hiển thị trình duyệt khi có CSS:
HỌC WEB CHUẨN HTML - HyperText Markup Language XHTML - Extensible HyperText Markup Language CSS - Cascading Style Sheets JS - JavaScript
HTML - HyperText Markup Language
XHTML - Extensible HyperText Markup Language
CSS - Cascading Style Sheets
JS - JavaScript
CSS viết:
Hiển thị trình duyệt khi có CSS:
Trình duyệt hỗ trợ
- Thuộc tính line-height được hỗ trợ trong đa số các trình duyệt.
- Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
- Trang chủ
- CSS3
- :empty
Tham khảo
- CSS
Định nghĩa và sử dụng
:empty { property: value; }
Ví dụ
HTML viết:
Thành phần p có chứa text
Thành phần div
Hiển thị trình duyệt khi chưa có CSS:
Thành phần p có chứa text
Thành phần div
CSS viết:
p:empty{ background: blue; height: 20px; width: 100px; }
Hiển thị trình duyệt khi đã có css:
Thành phần p có chứa text
Thành phần div
CSS viết:
Hiển thị trình duyệt khi đã có css:
Ta thấy những thành phần ở vị trí sau thành phần đều đã được chọn, ngoại trừ thành phần ở vị trí trước thành phần và thành phần ở vị trí khác cấp với thành phần .