28112 sujets

CSS et mise en forme, CSS3

Autre problème de padding

Bonjour
J'ai des balises <figure class="diapo"> qui contiennent une image et souvent rien d'autre.
Comme j'ai expliqué ailleurs, la raison est d'avoir une homogénéité de présentation, qu'il y ait on non une balise <figcaption> qui donne un commentaire à l'image.
Voici le code HTML généré par un script:
<figure class="diapo center" style="max-width: 300px;">
    <img src="...." alt="">
</figure>

J'ai défini le CSS suivant:
.diapo {
	border:1px solid;
	border-color: #990000;
	border-color:black !important;
	border-radius:0.25em;
	padding:0.125em;
}

Le résultat est l'image suivante:
http://tests.osirisnet.net/migration/outils/padding1.png
On remarque que l'intervalle entre la bordure et l'image est plus grande en bas de la <figure> qu'en haut
Par contre si j'écris:
.diapo {
	border:1px solid;
	border-color: #990000;
	border-color:black !important;
	border-radius:0.25em;
	padding:0.125em 0.125em 0;
}

Le résultat est l'image suivante:
http://tests.osirisnet.net/migration/outils/padding2.png
qui correspond à ce que je désire.
Question: avez vous une idée de la raison de ce curieux fonctionnement?
La page qui contient cette image (corrigée):
http://tests.osirisnet.net/tombes/nobles/roy/roy_01.htm

Je n'aime pas beaucoup trouver des solutions sans comprendre comment et pourquoi elles marchent..
Modifié par PapyJP (27 Jul 2016 - 17:26)
Modérateur
Bonjour,

Je suis peut-être un peu miro mais sur la seconde image, je n'ai pas l'impression que la marge basse soit identique aux autres.

Avez-vous mesuré à la règle cet espacement ? Est-ce une illusion d'optique ?

Par rapport à la contribution de Zelena, celle-ci m'amène à me demander si changer le display du tag img ne permettrait pas d'éviter le recours aux espacements ? Ça vaut peut-être le coût d'essayer.
Idem Greg_Lumiere.
Pourquoi ça fonctionne avec ce code (avec le 1e css):
<div class="centerText">
<figure style="max-width: 300px;" class="center" data-pres="center 300px">
<a href="javascript:PopupImage('roy_43.jpg')">
<img class="diapo" src="http://tests.osirisnet.net/tombes/nobles/roy/photo/roy_43v.jpg" alt="" />
</a></figure></div>


Je ne sais pas.
Modifié par limipl (27 Jul 2016 - 16:13)
Merci de vos réponses
Je vois clair dans ce qui se passe, ce qui n'était pas le cas jusqu'ici.
Je vais corriger en conservant le padding homogène et mettant un vertical-align adéquat.

@Greg_Lumiere, non, bien entendu je n'ai rien mesuré.
C'est un problème qui trainait depuis longtemps et que j'avais laissé tomber, simplement la remarque m'a été faite il y a deux jours, le problème m'a turlupiné à nouveau, j'ai constaté qu'un padding de 0 en bas avait l'air de plus ou moins corriger le problème, mais sans comprendre pourquoi je ne pouvais pas aller plus loin.

@limipl je ne crois pas que ça marche
Comment as tu fait pour reconstituer l'environnement?
Hmm! ce n'est pas mieux: si je mets vertical-align:bottom, cette fois-ci l'espacement du bas devient trop petit.
Je vais revenir à ma solution empirique....
Moi aussi j'ai modifié dans FireBug et ça ne roule pas, je n'ai donc pas modifié mon fichier CSS.
Je vais regarder cela de près.
Administrateur
Bonjour,

PapyJP a écrit :
Hmm! ce n'est pas mieux: si je mets vertical-align:bottom, cette fois-ci l'espacement du bas devient trop petit.
Je vais revenir à ma solution empirique....

S'agit-il de l'espacement entre image et texte (figcaption), lorsqu'il y a du texte ? Il manque maintenant les ~4px qu'il y avait en trop avant de mettre sur l'image vertical-align: top ou bottom ou display: block Smiley cligne
L'objectif est le suivant:
<figure> contient <img> et éventuellement <figcaption>, et même éventuellement autre chose, cas j'ai (cru?) constater que selon les navigateurs un <hx> à l'intérieur d'un <figcaption> ne fonctionnait pas très bien.
Ce que je veux est assez évident: <figure> a un cadre, le contenu doit être correctement espacé de façon symétrique, qu'il y ait on non un <figcaption>
S'il y a un <figcaption>, l'effet esthétique d'un cadre pas vraiment symétrique n'est pas gênant, car de toute façon on a le texte au dessous de l'image.
Par contre s'il n'y a que l'image, l'effet asymétrique saute aux yeux.
Comme tout ça est généré par un script, je peux bien entendu faire des choses différentes selon qu'il y a on non un texte. C'est du reste comme ça qu'il n'y a pas de <fiqcaption> vide si le texte n'est pas fourni au script.
Mais ce que je tiens d'abord à faire, c'est comprendre le phénomène.
Il est clair que l'histoire du vertical-align est le fond du problème, mais je crois comprendre que si on met un vertical-align:bottom ça "mord" plus ou moins sur le padding-bottom (???)
Je vais dormir dessus, je regarderai ça demain.
Modifié par PapyJP (27 Jul 2016 - 18:00)
@limipl
Je ne comprends pas ce que ça donne comme CSS.
Tu peux me faire une copie du CSS "corrigé"?
Le CSS c'est le même que ton 1er, avec 
padding: 0.125em;
dans la classe "diapo".
C'est le HTML qui est modifié:
la classe "diapo" passe de figure à img.
Par contre je viens de voir qu'il y a un effet de bord, le border-radius passe à 0.5em (au lieu de 0.25) à cause de
.docPage img {
    border-radius: 0.5em;
}
Compte tenu du contexte, je ne tiens pas à modifier le HTML et à transformer mes <figure> en <img>, même s'il n'y a pas de <figcaption>, cela ferait trop de modifications dans les scripts qui travaillent sur le DOM et cherchent les <figure>.
Je crois que je vais en rester à ma solution "doigt mouillé"
Sujet clos
Aller à