Wydajność elementu z blokiem śródliniowym

Question

Mam prosty przykład, w którym zewnętrzny DIV zawiera wewnętrzny DIV, który ma
display: inline-block;.
Ponieważ ustawiłem wysokość wewnętrznego div, spodziewam się, że zewnętrzny div przybrał taką samą wysokość jak wewnętrzny div. Zamiast tego, zewnętrzny div jest nieco wyższy, jak widać z skrzypiec. Pytanie: Dlaczego tak się dzieje i jak mogę "wypełnić" zewnętrzny div bez wyraźnego określenia jego wysokości?
Moim celem jest, aby zewnętrzny div rozwinął się i skurczył w zależności od wysokości wewnętrznej.

.outer { 
 
    background-color: red; 
 
} 
 
.inner { 
 
    display: inline-block; 
 
    width: 480px; 
 
    height: 140px; 
 
    background-color: green; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

Answer 1

Twój .inner div ma display: inline-block. Oznacza to, że potrzebuje on wbudowanego kontekstu formatowania. Układ Inline produkuje struts, dzięki czemu miejsce dla spekulantów. Można zobaczyć, jak to pasuje jeśli umieścić znak obok elementu .inner: http://jsfiddle.net/bs14zzeb/6/

Domyślna vertical-align jest mieć dolną krawędź inline-block pole pokryte z linii bazowej otaczającego tekstu. Nawet jeśli nie ma otaczającego tekstu, układ silnika wciąż musi zrobić miejsce dla całego wiersza tekstu.

Dlatego te odpowiedzi sugerują, że grasz z właściwością vertical-align. Ustawienie go na vertical-align: top, jak sugeruje jedna odpowiedź, mówi silnikowi układu, aby wyrównał górną krawędź pola inline-block z górną krawędzią ramki liniowej. Tutaj, ponieważ wysokość linii jest mniejsza niż 140 pikseli, pozbędzie się dodatkowej przestrzeni na dole. Ale jeśli wysokość linii jest wyższy niż ten, nadal będziesz mieć dodatkową przestrzeń pod spodem: http://jsfiddle.net/bs14zzeb/9/

Answer 2

http://jsfiddle.net/RokoCB/bs14zzeb/5/

Podczas korzystania inline-block nie zapomnij ustawić właściwość

vertical-align 

.

.inner { 
    display: inline-block; 
    vertical-align: top;  /* tada!!!! */ 
    width: 480px; 
    height: 140px; 
    background-color: green; 
} 

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Answer 3

Domyślna pionowe wyrównanie elementów inline jest bazowy, więc trzeba go ustawić do góry lub środkowy:

.outer { 
 
    background-color: red; 
 
} 
 
.inner { 
 
    display: inline-block; 
 
    width: 480px; 
 
    height: 140px; 
 
    background-color: green; 
 
    vertical-align:top; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

Answer 4

To dlatego, że #inner ma właściwość wyświetlacza ustawionej na inline-block. Aby to naprawić, zmień ekran na block lub ustaw właściwość vertical-align na top.

display: inline-block:

.outer { 
 
    background-color: red; 
 
} 
 
.inner { 
 
    width: 480px; 
 
    height: 140px; 
 
    background-color: green; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

vertical-align: 0:

.outer { 
 
    background-color: red; 
 
} 
 
.inner { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 480px; 
 
    height: 140px; 
 
    background-color: green; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

Answer 5

Problemem jest display: inline-block; Właściwość. Zamiast tego spróbuj display: block;.

http://jsfiddle.net/bs14zzeb/7/