A imagem dentro de div possui espaço extra abaixo da imagem

503

Por que no código seguir a altura do divé maior que a altura do img? Há uma lacuna abaixo da imagem, mas não parece ser um preenchimento / margem.

Qual é a diferença ou espaço extra abaixo da imagem?

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}
<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Imagem com uma lacuna ou espaço em branco abaixo dela

Misha Moroshko
fonte
10
Aqui está uma pequena e completa resposta a esta pergunta: stackoverflow.com/a/31445364/3597276
Michael Benjamin
1
Aqui está uma boa leitura sobre esta questão: The Strange <img> Gap Em HTML
Matheus Avellar

Respostas:

601

Por padrão, uma imagem é renderizada em linha, como uma letra, para que fique na mesma linha em que a, b, ce ed.

Há espaço abaixo dessa linha para os descendentes encontrados em letras como g, j, peq.

Demonstração de descendentes

Você pode:

  • ajuste a vertical-alignimagem para posicioná-la em outro lugar (por exemplo, o middle) ou
  • altere o displaymodo para que não fique embutido.

div {
  border: solid black 1px;
  margin-bottom: 10px;
}

#align-middle img {
  vertical-align: middle;
}

#align-base img {
  vertical-align: bottom;
}

#display img {
  display: block;
}
<div id="default">
<h1>Default</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

<div id="align-middle">
<h1>vertical-align: middle</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
  
  <div id="align-base">
<h1>vertical-align: bottom</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>

<div id="display">
<h1>display: block</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>


A imagem incluída é de domínio público e é originária do Wikimedia Commons

Quentin
fonte
9
Para ser mais preciso, isso acontece porque os elementos in-line ocupam o espaço de sua corrente line-height. Definir line-heighta dimensão desejada também superaria o espaço em branco indesejado.
Kevin Boucher
3
"F" se qualifica como descendente?
J08691
2
@ j08691 - Depende da fonte.
Quentin
134

Outra opção sugerida aqui é definir o estilo da imagem comostyle="display: block;"

Thea
fonte
4
obrigado. Isso também corrigiu um problema semelhante com o espaço em um filme em flash. (adicionado exibição: bloco de etiquetas de incorporação / objeto)
jessieloo
5
ou inline-blockse você ainda deseja que seja exibido em linha, como as imagens normalmente fazem.
Ian
6
@Ian @Imperative inline-blockparece não estar funcionando.
p.matsinopoulos
93

Conserto rápido:

Para remover o espaço abaixo da imagem , você pode:

  • Defina a propriedade de alinhamento vertical da imagem como vertical-align: bottom; vertical-align: top;ouvertical-align: middle;
  • Defina a propriedade de exibição da imagem como display:block;

Veja o código a seguir para uma demonstração ao vivo:


Explicação: por que há uma lacuna na imagem?

A lacuna ou espaço extra sob a imagem não é um bug ou problema, é o comportamento padrão. A causa principal é que as imagens são elementos substituídos ( consulte Elementos substituídos pelo MDN ). Isso permite que eles "ajam como imagem" e tenham suas próprias dimensões intrínsecas, relação de aspecto ...
Os navegadores calculam suas propriedades de exibição, inlinemas fornecem um comportamento especial que os aproxima.inline-block elementos (como você pode alinhar verticais los, dar uma altura, margem superior / inferior e estofamento, transforma ...).

Isso também significa que:

<img>não possui linha de base; portanto, quando as imagens são usadas em um contexto de formatação em linha com alinhamento vertical: linha de base, a parte inferior da imagem será colocada na linha de base do texto.
( fonte: MDN , ênfase minha )

Como os navegadores, por padrão, calculam a propriedade de alinhamento vertical para a linha de base, esse é o comportamento padrão. A imagem a seguir mostra onde a linha de base está localizada no texto:

Localização da linha de base no texto ( Fonte da imagem )

Os elementos alinhados da linha de base precisam manter espaço para os descendentes que se estendem abaixo da linha de base (como j, p, g ...), como você pode ver na imagem acima. Nesta configuração, a parte inferior da imagem está alinhada na linha de base, como você pode ver neste exemplo:

div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>


É por isso que o comportamento padrão da <img>tag cria uma lacuna na parte inferior do contêiner e por que alterar a propriedade vertical-align ou a propriedade display remove-a como na seguinte demonstração:

div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}

.block img{
  display:block;
}
.bottom img{
  vertical-align:bottom;
}
<p>Default:</p>
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

web-tiki
fonte
Portanto, é por isso que definir o tamanho da fonte como 0 não funciona. ou faz?
Persijn
2
@Persijn faz. Como o ajuste line-height:0;, mas eu não considero isso como uma boa solução em comparação com a alteração das-align vertical ou exibição propriedades
web-tiki
2
Observe, no entanto, que alguns navegadores não respeitam font-size:0: eles definem o tamanho da fonte para o tamanho mínimo nas configurações do usuário.
Sr. Lister
Sim, parece um espaço em branco.
Mrbengi
bem, acho que a middle text-top sub superposição na imagem não está certa.
Xianshenglu 19/0518
40

Também é possível anular a altura da linha dos pais:

#wrapper {
  line-height: 0;
}

Todas as correções: http://jsfiddle.net/FaPFv/

Pavlo
fonte
5
ATENÇÃO! isso também matará todos os nós de texto no #wrapper. como será herdado. Mas pontos de bônus para esse violinista incrível! aqui é atualizado com nós de texto. jsfiddle.net/FaPFv/30
gcb
Como alternativa, tamanho da fonte: 0
Kiran
13

Tudo que você precisa fazer é atribuir esta propriedade:

img {
    display: block;
}

As imagens por padrão possuem esta propriedade:

img {
    display: inline;
}
Daniel Díaz
fonte
7

Você pode usar vários métodos para esse problema, como

  1. Usando line-height

    #wrapper {  line-height: 0px;  }
  2. Usando display: flex

    #wrapper {  display: flex;         }
    #wrapper {  display: inline-flex;  }
  3. Usando display: block, table, flexeinherit

    #wrapper img {  display: block;    }
    #wrapper img {  display: table;    }
    #wrapper img {  display: flex;     }
    #wrapper img {  display: inherit;  }
Santosh Khalse
fonte
Por favor, não recomende o line-heighthack muito desleixado , ou pelo menos deixe claro, por que é a pior "solução" de todas: no momento em que alguém coloca texto ao lado da imagem (especialmente multilinhas pré-formatadas com tags BR), elas vão encontrar-se em uma situação pior do que começaram.
Sz.
5

Eu usei line-height:0e funciona bem para mim.

Abdulla khan
fonte
Desculpe, -1: isso estraga o posicionamento do texto; portanto, se alguém também colocar algum texto (especialmente multilinhas, digamos, com <BR>) ao lado da imagem, eles terão uma bagunça mal posicionada, sobreposta / pendente.
Sz.
3

Achei que funciona muito bem usando display: block; na imagem e alinhamento vertical: top; no texto.

.imagebox {
    width:200px;
    float:left;
    height:88px;
    position:relative;
    background-color: #999;
}
.container {
    width:600px;
    height:176px;
    background-color: #666;
    position:relative;
    overflow:hidden;
}
.text {
    color: #000;
    font-size: 11px;
    font-family: robotomeduim, sans-serif;
    vertical-align:top;
    
}

.imagebox img{ display:block;}
<div class="container">
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
</div>

ou você pode editar o código em JS FIDDLE

Timothy
fonte
-1

Acabei de adicionar float:leftao div e funcionou

TomoMiha
fonte
9
Isso ocorre porque configuração float:leftfaz com quedisplay:block
Kevin Boucher