O elemento <img> está no nível do bloco ou no nível inline?

163

Eu li em algum lugar que esse <img>elemento se comporta como ambos. Se correto, alguém poderia explicar com exemplos?

html css image

— subestimar
fonte

189

É verdade, eles são os dois - ou mais precisamente, são elementos de "bloco embutido". Isso significa que eles fluem em linha como texto, mas também têm largura e altura como elementos de bloco.

No CSS, você pode definir um elemento para display: inline-blockreplicar o comportamento das imagens *.

Imagens e objetos também são conhecidos como elementos "substituídos", uma vez que não possuem conteúdo em si, o elemento é essencialmente substituído por dados binários.

* Observe que os navegadores usam tecnicamente display: inline(como visto nas ferramentas do desenvolvedor), mas estão dando tratamento especial às imagens. Eles ainda seguem todas as características de inline-block.

— DisgruntledGoat
fonte

Eu sempre leio que as imagens são elementos inline, não inline-block, mas faz sentido que seriam inline-block, devido à capacidade de adicionar largura e altura.

— Donato

22

Esta resposta não está tecnicamente correta. Precisamente falando, os imgelementos não são, inline-blockna verdade, inlineelementos. Você pode verificar isso em um navegador moderno clicando com o botão direito do mouse em uma imagem, clicando em "Inspecionar elemento" e depois visualizando o estilo calculado, que será exibido display: inline. Não há contexto de bloco acontecendo dentro da tag, portanto, não é correto chamá-la inline-block. Para obter mais informações sobre elementos inline substituídos, consulte a resposta de Quentin e este artigo do MDN .

— Maximillian Laumeister

@ O link máximo não diz nada sobre a substituição de elementos substituídos.

— usar o seguinte

@DisgruntledGoat O link que eu postei não diz que os imgelementos estão alinhados - as ferramentas de desenvolvimento do Google Chrome mostram os imgelementos como alinhados. Este post é o único lugar que eu encontrei até agora e diz que eles são inline-block. Curiosamente, eu também não encontrei nenhuma autoridade que diga que é inline. É como tratar a tag dependente da implementação, talvez?

— Maximillian Laumeister

2

@ Max De acordo com isso , os elementos substituídos estão fora do escopo do modelo de formatação CSS. Nada nas especificações HTML ou CSS especifica que as imagens estão embutidas. Portanto, independentemente do que o navegador diga que é, as imagens são tratadas exatamente como foram definidas display:inline-block.

— usar o seguinte

53

Um imgelemento é um elemento embutido substituído .

Ele se comporta como um elemento embutido (porque é), mas algumas generalizações sobre elementos embutidos não se aplicam a imgelementos.

por exemplo

Generalização: "Largura não se aplica a elementos embutidos"

O que a especificação realmente diz : "Aplica-se a: todos os elementos, exceto elementos inline não substituídos, linhas da tabela e grupos de linhas"

Como uma imagem é um elemento embutido substituído, ela se aplica.

— Quentin
fonte

13

Os elementos IMG estão embutidos, o que significa que, a menos que sejam flutuados, eles fluirão horizontalmente com texto e outros elementos embutidos.

Eles são elementos de "bloco", pois possuem largura e altura. Mas eles se comportam mais como "bloqueio em linha" a esse respeito.

— Robusto
fonte

7

Para quase todos os fins, pense neles como um elemento embutido com um conjunto de largura. Basicamente, você é livre para ditar como você gostaria que as imagens fossem exibidas usando CSS. Geralmente, defino algumas classes de imagem da seguinte forma:

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
fonte

2

Sempre que você insere uma imagem, apenas assume a largura que a imagem possui originalmente. Você pode adicionar qualquer outro elemento html próximo a ele e verá que ele permitirá. Isso faz da imagem um elemento "inline".

— Avatar
fonte

0

É verdade, eles são os dois - ou mais precisamente, são elementos de "bloco embutido". Isso significa que eles fluem em linha como texto, mas também têm largura e altura como elementos de bloco.

— Modaser Sadat
fonte