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

Respostas:

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