Hướng dẫn html empty paragraph height - chiều cao đoạn rỗng html

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: https://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

Thành phần p có chứa text	Thành phần div	Ví dụ	HTML viết:
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 .