yếu tố inline-block không có văn bản làm cho khác nhau

Question

<div style="background-color:red"> 
 
    <div style="display:inline-block;background-color:green;height:20px;width:20px;"></div> 
 
</div> 
 
<div style="background-color:yellow"> 
 
    <div style="display:inline-block;background-color:green;height:20px;width:20px;">hi</div> 
 
</div>

Khi render trong FF hoặc Chrome chiều cao của div đỏ là 26px, trong khi chiều cao của div vàng là 20px. Làm thế nào tôi có thể làm cho div màu đỏ render giống như div màu vàng, nhưng không có nó chứa bất kỳ văn bản nào?

Answer 1

chỉ là một suy nghĩ:

miễn là không có văn bản trong div, nó đối xử như một inline-hình ảnh (hay cái gì khác), và do đó, nó vertical-align được thiết lập để 'cơ sở' (hoặc văn bản dưới cùng hoặc bất kỳ thứ gì) thay vì 'dưới cùng'.

giải pháp:

để sửa đó, thiết lập vertical-align: bottom; trên div bên trong của bạn. có hoàn toàn không cần phải đặt một không gian hoặc yếu tố vô hình vào nó, giống như những người khác đề cập (nhưng đó sẽ là một (xấu xí) giải pháp, quá)

Answer 2

Làm thế nào để đặt một không gian rộng bằng không (​) trong nút "trống"?

Answer 3

Thật đáng tiếc, nhưng bạn có thể thêm   vào div trống.

inline-block là loại hiển thị vui nhộn và không có nội dung vì các thuộc tính khác như font-size và line-height thực sự có thể tăng yếu tố cao hơn 20px.

Answer 4

Nếu bạn muốn có một chiều cao cụ thể, sử dụng

min-height: 1em; 

Sử dụng không gian của một số loại là một chiều cao khác nhau trong một số trường hợp.