Wyświetlacz CSS: inline vs inline-block [duplikat]

Question

Wyświetlacz CSS: inline vs inline-block [duplikat]

Możliwy duplikat:
Jaka jest różnica między display: inline i display: inline-block?

W CSS, {[0] } może mieć wartości inline i inline-block. Czy ktoś może szczegółowo wyjaśnić różnicę między inline i inline-block?

Szukałem wszędzie, najbardziej szczegółowe wyjaśnienie mówi mi, że {[2] } jest umieszczony jako inline, ale zachowuje się jak block. Nie wyjaśnia jednak, co dokładnie oznacza "zachowuj się jak blok". Czy to jakaś specjalna funkcja?

Przykład byłby jeszcze lepszą odpowiedzią. Dzięki.

473

css

Author: Community, 2012-02-08

Source

1 answers

score 970 · Accepted Answer

Elementy Inline:

szanuj lewy i prawy margines i wypełnienie, ale nie góra i dół
nie można mieć ustawionych szerokości i wysokości
pozwól innym elementom usiąść po lewej i prawej stronie.
Zobacz bardzo ważne uwagi na ten tutaj .

Elementy bloku:

Wymuś przerwanie linii po elemencie blokowym
uzyskuje pełną szerokość, jeśli szerokość nie defined

Inline-block elements:

pozwól innym elementom usiąść po lewej i prawej stronie
respektuj górne i dolne marginesy i wyściółki
respect wysokość i szerokość

From W3Schools :

Element inline nie ma podziału linii przed lub po nim, i toleruje elementy HTML obok niego.

Element blokowy ma białe znaki nad i pod nim i nie toleruje żadnych elementów HTML obok.

Element inline-block jest umieszczony jako element inline( w tej samej linii co sąsiadująca zawartość), ale zachowuje się jak element blokowy.

Kiedy wizualizujesz to, wygląda to tak:

CSS block vs inline vs inline-block

Zdjęcie pochodzi z tej strony , która również mówi trochę więcej na ten temat.