Czy element <img> jest na poziomie bloku czy na poziomie wbudowanym?

163

Czytałem gdzieś, że <img>element zachowuje się jak oba. Jeśli tak, czy ktoś mógłby wyjaśnić na podstawie przykładów?

html css image rozumieć
źródło

Odpowiedzi:

189

To prawda, oba są - a ściślej mówiąc, są to elementy „inline block”. Oznacza to, że płyną one w wierszu jak tekst, ale mają również szerokość i wysokość jak elementy blokowe.

W CSS możesz ustawić element display: inline-blocktak, aby replikował zachowanie obrazów *.

Obrazy i obiekty są również nazywane elementami „zastąpionymi”, ponieważ same w sobie nie zawierają treści, a element jest zasadniczo zastępowany danymi binarnymi.

* Należy pamiętać, że przeglądarki używają technicznie display: inline(jak widać w narzędziach programistycznych), ale traktują obrazy w specjalny sposób. Nadal podążają za wszystkimi cechami inline-block.

Niezadowolony Kozioł
źródło
Zawsze czytałem, że obrazy są elementami inline, a nie inline-block, ale ma sens, aby były one inline-block, ze względu na możliwość dodawania szerokości i wysokości.
Donato
22
Ta odpowiedź nie jest poprawna technicznie. Mówiąc dokładniej, imgelementy nie są, inline-blockale w rzeczywistości inlineelementami. Możesz to sprawdzić w nowoczesnej przeglądarce, klikając prawym przyciskiem myszy obraz, klikając „Sprawdź element”, a następnie przeglądając obliczony styl, który zostanie wyświetlony display: inline. W tagu nie ma kontekstu blokowego, więc nie można go wywoływać inline-block. Aby uzyskać więcej informacji na temat zastępowanych elementów wbudowanych, zobacz odpowiedź Quentina i ten artykuł w MDN .
Maximillian Laumeister
@Max to łącze nie mówi nic o wstawianiu zastępowanych elementów.
DisgruntledGoat
@DisgruntledGoat Link, który opublikowałem, nie mówi, że imgelementy są wbudowane - narzędzia programistyczne Google Chrome pokazują imgelementy jako wbudowane. Ten post jest jedynym miejscem, które do tej pory znalazłem, które mówi, że są inline-blockzamiast tego. Co ciekawe, nie znalazłem żadnego autorytetu, który by twierdził, że oni też są inline. Może jak traktować tag zależny od implementacji?
Maximillian Laumeister
2
@Max Zgodnie z tym zastąpione elementy są poza zakresem modelu formatowania CSS. Nic w specyfikacjach HTML ani CSS nie określa, że ​​obrazy są wbudowane. Zatem niezależnie od tego, co podaje przeglądarka, obrazy są traktowane dokładnie tak, jak zostały ustawione display:inline-block.
DisgruntledGoat
53

imgElementem jest zastąpione inline elementu .

Zachowuje się jak element wbudowany (ponieważ jest), ale niektóre uogólnienia dotyczące elementów wbudowanych nie mają zastosowania do imgelementów.

na przykład

Uogólnienie: „Szerokość nie dotyczy elementów wbudowanych”

Co faktycznie mówi specyfikacja : „Dotyczy: wszystkich elementów oprócz niezastępowanych elementów wbudowanych, wierszy tabeli i grup wierszy”

Ponieważ obraz jest zastępowanym elementem w tekście, ma to zastosowanie.

Quentin
źródło
13

Elementy IMG są wbudowane, co oznacza, że ​​jeśli nie są pływające, będą płynąć poziomo z tekstem i innymi elementami wbudowanymi.

Są to elementy „blokowe”, ponieważ mają szerokość i wysokość. Ale pod tym względem zachowują się bardziej jak „inline-block”.

Robusto
źródło
7

Prawie do wszystkich celów traktuj je jako element wbudowany z ustawioną szerokością. Zasadniczo możesz dyktować, jak chcesz wyświetlać obrazy za pomocą CSS. Generalnie ustawiam kilka klas obrazu, takich jak:

img.center {display:block;margin:0 auto;}

img.left {float:left;margin-right:10px;}

img.right  {float:right;margin-left:10px;}

img.border  {border:1px solid #333;}
Montana Flynn
źródło
2

Za każdym razem, gdy wstawiasz obraz, przyjmuje on po prostu szerokość oryginalną. Możesz dodać dowolny inny element html obok niego, a zobaczysz, że na to pozwoli. To sprawia, że ​​obraz jest elementem „wbudowanym”.

Awatara
źródło
0

To prawda, oba są - a ściślej mówiąc, są to elementy „inline block”. Oznacza to, że płyną one w wierszu jak tekst, ale mają również szerokość i wysokość jak elementy blokowe.

Modaser Sadat
źródło