sıralı blok elemanı, farklı

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>

FF ve krom kırmızı div yüksekliği 26px olan işlenen

hale getirir. Kırmızı divun sarı div ile aynı şeyi nasıl oluşturmasını sağlayabilirim, fakat herhangi bir metin içermez mi?

Answer 1

sadece bir düşünce: sürece div metin, bir inline-görüntü (ya da başka bir şey) gibi muamele ve bu nedenle vertical-align başlangıca '(ayarlı mi oluyor orada olarak

veya "alt" yerine altyazı veya her ne olursa olsun.

çözüm:

, o düzeltmek için iç bölümlerde; vertical-align: bottom; ayarlayın. Orada bahsedilen diğerleri gibi içine bir boşluk veya görünmez eleman koymak gerek kesinlikle var (ama bu da bir (çirkin) çözümü olacaktır) Belirli bir yüksekliğe sahip olmak istiyorsanız,

Answer 2

"Boş" düğümde sıfır genişlikli boşluk (​) koymaya ne dersiniz?

Answer 3

Bu topal, ancak boş bölüme   ekleyebilirsiniz.

inline-block, komik bir ekran türü ve içeriği olmadan font-size ve line-height gibi diğer özellikleri gerçekten 20px'den uzun olan öğeyi artırabilir.

Answer 4

kullanmak

min-height: 1em; 

Bazı türlerde boşluk kullanmak, bazı durumlarda farklı bir yüksekliktir.