interessant
1-de façon pragmatique , desactiver que la propriété border-style équivaut a désactiver #upper_left et entraine une modification de la propriété height
=> sans preuve je pense que cela provient de la façon dont les navigateurs gère le calc em rem en rapport au width top /bottom ( espace pas area) du border .
=> remplacer display:block; en display:table-cell;
header {
display: table-cell;
}
2-en étudiant la hiéarchie html dans l'ordre d 'apparition des balises dans le code html au niveau du parent <div class="global"> ( <img> , <nav>, <h2>David Marec </h2>) pour les propriété css :margin( "top") , display position on a
.............margin..display....position
.global ....0...... block.......relative
<img> .....0......float left
<nav> .....0......float right
<h2> ....17.3px block..... static
je pense que le problème est que le h2 en block se positionne graphiquement entre le <img> et le <nav> et le content ( la partie supérieur du texte boundingbox ) s'aligne avec le la partie supérieur du boundingbox du .global . Cela donne l illusion que le boundingbox du .Global à un margin de 17.36px qui est en fait celui du <h2> .
Pour l'espace du bas celui ci est du au margin-bottom du h3 qui se trouve en fin de code dans la structure html de .global .....
Il ya une relation entre le font-size et la propriété css margin en utilisant les unités rem pour h1 et h3 ..bizarre h2 font-size non défini en fonction de l'unité rem ??!!
3- une remarque sur le sélecteur txtleft / text-align . Le selector txtleft semble inutile après avoir activé desactivé la propriété text-align ?
.txtleft { text-align: left;}
J' espère que ce je n'affirme pas des choses inexactes ... a vous de vérifier ...vous avez peut être le diagnotique. la solution ? : les margins transparentes ne fusionnent pas il me semble il faut dont agir sur BP( Border Padding ) avec ajout + retrait- bien dosé symétrique ? mais il doit y avoir plusieurs solutions ( un float left sur h2 !!??) .
Ce modèle CSS de boite est vraiment difficile à comprendre ( outils de debug à bien comprendre ) et les spécifications sont vraiment fait que pour les développeurs du moteur CSS des navigateurs !
Cordialement
NB j avais 2 images a uploader mais toujours ce problèmes d' upload d images !! ( firefox 42). un catch return avec la raison serait bien !! au lieu du message suivant :
"""Erreur
L'image n'a pas été envoyée.
Veuillez effectuer un autre essai. """
Modifié par 75lionel (07 Dec 2015 - 22:35)
