28172 sujets

CSS et mise en forme, CSS3

Modérateur
Bonjour,

Voici le html sur lequel j'avais un souci :
<figure>
  <img src="http://perso.jojaba.fr/xmedia/images/tesclearbox/donald-1.jpg" alt="Mon chat" />
  <figcaption>
    <dl>
      <dt>Titre du site</dt>
        <dd>Commande&nbsp;: Nom de la la personne</dd>
        <dd>Date&nbsp;: 4<sup>e</sup> trimestre 2015</dd>
        <dd>Description de la commande.</dd>
        <dd>URL&nbsp;:  http://www.trucmuche.com/</dd>
 
    </dl>
  </figcaption>
</figure>


Le code css :
figure {
  margin: 5px auto;
  padding: 5px;
  width: 500px;
  border: #000 solid 1px
}
img {
  max-width: 100%;
}
figcaption {
  margin: 0;
  padding: 0;
  background: #F5F5F5;
}
dl {
  margin: 0;
  padding: 0;
  border: red dotted 1px;
}
dt {
  margin: 0;
  padding: 5px;
  color: blue;
  font-weight: bold;
}
dd {
  margin: 0;
  padding: 2px 0 0 20px;
  color: orangered;
}


Mon souci : il y a un espace entre l'image et le figcaption. J'ai trouvé plusieurs solutions pour résoudre ce problème mais je n'arrive toujours pas à comprendre pourquoi on a un espace si on n'applique pas l'une de mes 4 solutions que vous pourrez tester sur le fiddle suivant : https://jsfiddle.net/jojaba/qrgny3ht

Merci d'avance pour vos explications expertes Smiley smile
Modifié par jojaba (04 Jan 2016 - 20:12)
bonsoir, comme tu l'as expérimenté, display ou vertical-align suffit à corriger ton défaut visuel.

Une image est par défaut sur le baseline (vertical-align), tout comme le texte, où certaines lettre (comme: ypqgj) ont besoin de cet espace Smiley smile . c'est cet espace reservé que tu perçois sous l'image.
Modérateur
Merci pour cette réponse gc-nomade. Donc le baseline ne correspond pas à vertical-align: bottom ! On peut considérer baseline comme un quatrième alignement de la propriété vertical-align (j'aurais dû commencer avec ça dans mes recherches qui restaient vaines !!!).
D'ailleurs, voici confirmation de tes dires (il y a d'autres possibilités que je ne connaissais pas pour vertical-align) : http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Merci encore d'avoir pris le temps de répondre Smiley smile