CSS Formatação de imagem css

[Vitor2k]

Fui colocar borda em uma imagem com legenda, até ai tudo bem, mas na hora q usei o "position" para colocar a legenda dentro da imagem, a parte de baixo da imagem ficou com um pequeno espaço em branco entre a imagem e a borda. Sou iniciante

[DiF]

@Vitor2k Olá,  poderia por gentileza postar seus códigos?

Sem ver o que fez fica meio difícil de tentar ajudar.

 

Ademais, ou você está usando erroneamente os positions ou faltou definir para imagem que ele seja a nível de bloco.

 

Exemplo:

<figure>
  <img src="https://www.plantapronta.com.br/projetos/140/01.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 Esta é uma bela casa</figcaption>
</figure>

CSS:

figure{
  border: 1px solid red;
  position: relative
}

figure img{
  display: block;
}

figcaption{
  color: #fff;
  position: absolute;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: rgba(0,0,0,0.5);
  bottom: 0px;
}

 

Basicamente, o elemento figure, recebe a posição relativa porque ele é o container da imagem e da legenda.

O elemento figcaption que é a legenda, recebe a posição absoluta onde ficou definido que ele vai ficar bem em baixo da imagem mas dentro dela.

Perceba que defini um background  para você ver os limites.

 

E o pulo do gato para remover aquele espaço branco entre a  borda e a legenda, é que deve definir o display: block  para o elemento img contido no elemento figure.

 

Veja funcionando: http://jsfiddle.net/skmb1yLx/11/