Chiều cao tối thiểu cho div hoặc span có phần tử rỗng

Question

Khi tôi đặt trong một số span hoặc div một chuỗi bị trống hoặc chỉ bao gồm khoảng trắng, phần đó không có chiều cao và khi đó span hoặc div nhúng vào một cái gì đó giống như một table, ô đó không có đủ chiều cao và trông có vẻ sai. Làm cách nào để đảm bảo rằng một số span hoặc div chiếm ít nhất chiều cao khi chuỗi có các ký tự khác? Đây là một cái gì đó giống như làm \strut trong TeX. Tôi có thể chèn một cái gì đó vào chuỗi, hoặc điều chỉnh css.

Tôi đã thử, đưa những điều sau vào lớp css có liên quan, nhưng vấn đề là tôi phải điều chỉnh chiều cao chuỗi theo cách thủ công (Tôi không chắc chắn nếu nó là "1em". Có lẽ là không). Cách đúng để làm điều này là gì?

min-height: 1em;

Answer 1

yếu tố span của bạn cần phải trở thành một yếu tố ngăn chặn nếu bạn muốn thiết lập chiều cao của nó. Vì vậy, hãy đặt kiểu display: block hoặc display: inline-block nếu thích hợp.

span.item { 
    display: inline-block; 
} 

Để thiết lập chiều cao của một khoảng trống, tôi đã tìm thấy nó tốt nhất chỉ đơn giản là tiêm một   hơn là thiết lập một min-height. (CẬP NHẬT: mỗi @sawa, thay vì sử dụng một nhân vật không gian không bị phá hủy, có lẽ một nhân vật phù hợp hơn sẽ chiếm không không gian, tức là unicode nhân vật SPACE ZERO WIDTH, \200b.)

span.item:empty:before { 
    content: "\200b"; /* unicode zero width space character */ 
} 

Điều này sẽ làm việc cho bất kỳ kích thước phông chữ có thể được, và nó tránh được vấn đề với đường cơ sở không xếp hàng với văn bản liền kề. Nhìn vào dòng chữ "Huh?" dưới đây:

http://plnkr.co/edit/GGd7mz?p=preview

(Xem câu hỏi tương tự: https://stackoverflow.com/a/29354766/516910)

Answer 2

Mã của bạn không đúng: bạn không cần dấu ngoặc kép ("") xung quanh các giá trị trong CSS.

Hoặc sử dụng:

min-height: 1em; /* I am not sure if one can use em with height properties */ 

Hoặc sử dụng:

min-height: 12px;