Làm cách nào để đặt chiều cao khoảng trống bằng chiều cao dòng mặc định?

Question

Tôi có một bộ các thành phần <span> (mỗi phần tử được lồng vào số <div>). Họ xây dựng một chồng các tấm, như trong hình dưới đây.

Khi khoảng thời gian chứa một số văn bản, nó có chiều cao bình thường. Nhưng khi nó trống rỗng, chiều cao của nó là 0px. Nhưng tôi cần nó để có một chiều cao bình thường (để làm cho nó trông giống như trong hình).

Làm cách nào để đạt được hành vi này? (Tôi đã cố gắng để chèn một không gian, nhưng có lẽ có một giải pháp tốt hơn).

Answer 1

Đây là một đơn giản và mạnh mẽ giải pháp:

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

(Cập nhật 2015/12/18: thay vì sử dụng \00a0 khoảng trắng không bị phá vỡ, sử dụng \200b, đó là cũng là một không gian không phá vỡ, nhưng với chiều rộng bằng không. Hãy xem câu trả lời khác của tôi tại https://stackoverflow.com/a/29355130/516910)

Bộ chọn CSS này chỉ chọn các khoảng trống "rỗng" và chèn một số nội dung vào không gian trống đó, cụ thể là một ký tự khoảng trắng. Vì vậy, không có vấn đề gì kích thước phông chữ và chiều cao dòng bạn đã đặt, mọi thứ xung quanh rằng <span> sẽ rơi vào dòng, giống như khi bạn có văn bản trong đó <span>, có lẽ là những gì bạn muốn.

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

Kết quả trông như thế này:

---

tôi thấy hai vấn đề với việc sử dụng min-height:

1. nó là dễ bị tổn thương nơi cỡ chữ thay đổi
2. đường cơ sở văn bản không có trong địa điểm chính xác

Dưới đây là những gì các phản ví dụ giống như khi mọi thứ đi sai:

thay đổi kích thước

1. Phông chữ, và bây giờ bạn phải tay điều chỉnh phút -height một lần nữa. Bạn không thể sử dụng cùng một lớp để hỗ trợ các phần khác nhau của trang web của bạn, nơi kích thước phông chữ khác nhau. Ở đây kích thước phông chữ ở vị trí này là 30, nhưng chiều cao tối thiểu vẫn được đặt thành 20. Vì vậy, các khoảng trống không cao. :-(

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

2. khoảng trống của bạn có chiều cao chính xác với min-height, nhưng nó không xếp hàng một cách chính xác với văn bản xung quanh span các cơ sở rơi sai Nhìn vào dòng mà nói dưới đây.. "Huh?":

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

Mã ví dụ cuối cùng này:

<div class="group"> 
    Hello <span class="item">Text</span> 
</div> 
<div class="group"> 
    Huh? <span class="item"></span> 
</div> 
<div class="group"> 
    Yes! <span class="correct"></span> 
</div> 

css:

.group { 
    background-color: #f1f1f1; 
    padding: 5px; 
    font-size: 20px; 
    margin-bottom: 20px; 
} 

.item { 
    background-color: #d2e3c5; 
    border-radius: 6px; 
    padding: 10px; 
    margin-bottom:5px; 
    display: inline-block; 
    min-height: 20px; 
} 

.correct { 
    background-color: #d2e3c5; 
    border-radius: 6px; 
    padding: 10px; 
    margin-bottom:5px; 
    display: inline-block; 
} 
.correct:empty:before { 
    content: "\00a0"; 
} 

Answer 2

Bạn có thể đặt hiển thị span: inline-block; và sau đó thêm min-height

Answer 3

lẽ điều này sẽ làm việc -

span{ 
    min-height:16px; 
} 

Answer 4

Từ hình ảnh, có vẻ như bạn đã thiết display: block trên span yếu tố. Nếu không, hãy thêm nó. Ngoài ra, hãy cân nhắc sử dụng div để thay thế. Sự khác biệt giữa hai yếu tố là span là nội dòng theo mặc định, div bị chặn theo mặc định, vậy tại sao không sử dụng sau?

Sau đó, bạn cần đặt min-height thành giá trị bằng với chiều cao của các mục có nội dung. Điều này thường được xác định bởi chiều cao dòng của chúng. Chiều cao dòng mặc định thay đổi theo phông chữ (và theo trình duyệt), do đó, để có được kết quả nhất quán, hãy đặt chiều cao dòng một cách rõ ràng, ví dụ:

* { line-height: 1.25; } 
span { min-height: 1.25em; }