CSS Espaço branco indesejado entre imagem e borda

João Vitor Werneck · 28 de fevereiro de 2019

Meu problema é o seguinte, eu tenho uma imagem com um titulo em <figcaption>, tudo isso contornado por uma borda. Só que quando tento tirar o titulo debaixo da imagem para coloca-lo dentro da imagem, fica com uma faixa branca entre a imagem e a borda na parte inferior. Veja bem, meu problema não é em colocar o titulo no lugar e sim o porque essa faixa esta aparecendo entre a imagem e a borda.

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <title> Teste </title>
    <style>
    
      figure.foto-legenda {
        border: 3px solid red;

      }

      figure.foto-legenda img {
        width: 100%;
        height: 100%;
      }

      figure.foto-legenda figcaption{
        position: absolute;
        top: 0px;
      }
    </style>
  </head>
  <body>
  <div id="interface">
    <h1> Teste </h1>
    <figure class="foto-legenda">
    <img src="imagens/t1.jpg">
    <figcaption>
      <h2>Testando</h2>
    </figcaption>
    </figure>
  </div>
  </body>
</html>

navegantenarede · 28 de fevereiro de 2019

@João Vitor Werneck os elementos de cabeçalho adicionam um margem, você pode abrir o documento HTML e usar o seletor de elementos para identificar do que se trata o espaço.

João Vitor Werneck · 4 de março de 2019

Estou com um problema, toda vez q vou colocar borda na imagem usando uma class no figure, fica com um espaço em branco entre a imagem e a borda

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="utf-8">
		<title> Testando </title>
		<style>

			figure.foto-legenda {
				border: 3px solid red;
			}
			
		</style>
	</head>
	<body>

		<figure class="foto-legenda">
			<img src="imagens/homer.jpg"/>
		</figure>
	</body>
</html>

DiF · 4 de março de 2019

@João Vitor Werneck Na verdade, não é no elemento figure que você deve por a borda. Mas sim, no elemento IMG.

Assim vai ficar certo.

Exemplo: https://jsfiddle.net/dife/4bu8wa5e/5/

João Vitor Werneck · 4 de março de 2019

@DiF eu fiz desse jeito e funciona, só q lá na frente quando vou tentar usar algumas coisas acaba ficando meio gambiarra. o que eu to querendo dizer é, eu fiz igual a esse vídeo e funcionou duas vezes com diferentes projetos, mas agr por algum motivo esta acontecendo esse problema https://www.youtube.com/watch?v=A3mlsAk4G2k&list=PLHz_AreHm4dlAnJ_jJtV29RFxnPHDuk9o&index=12