Bonjour,
Après un bon moment de galère sur les bordures j'ai fini par créer une nouvelle page blanche pour repartir de 0.
Ce que je fais
J'ai mis un box-sizing:border-box
Ça fonctionne bien pour la largeur, mais pas pour la hauteur.
J'ai 3 div de 50px,
et j'ajoute une bordure de 10px sur celui du millieu
(image après le code)
Je n'ai rien d'autre que ce code :
<div class="container">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
</div>* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.div1, .div2, .div3 {
display: inline-block;
width: 50px;
height: 50px;
}
.container {
background-color: grey;
}
.div1 {
background-color: pink;
}
.div2 {
background-color: orange;
border: black 10px solid; /* Ajout des bordures */
}
.div3 {
background-color: yellow;
}Ce que j'obtiens
(http://hpics.li/9658d10)
Les blocs rose et jaune sont descendus de 10px.
o_O
J'ai essayé avec et sans resetCSS, c'est pareil
Testé sur FireFox, Chrome, et Opéra. Pareil.
J'aimerai bien entendu qu'il n'y ai pas de décalage ^^
J'ai cherché des réponses mais on dirait que personne n'en parle.
Du coup j'imagine que je m'y prends mal, est-ce que j'ai raté quelque-chose ?
6 réponses
1) on ajoute un "vertical-align: top;" (ou bottom), au container des 3 div
Ce n'est pas sur le container que tu ajoutes la propriété vertical-align, mais sur tes 3 divs, donc .div1, .div2, .div3.
Du coup, l'argument suivant ne tient pas :
(s'il n'y avait pas déjà de container prévu, on alourdi le html)
Qui plus est, cette propriété est justement conçue pour gérer l'alignement vertical, donc pourquoi ne pas l'utiliser ?
Salut CrazyWeeds,
Mais moi je veux le "border-box" justement, ce n'est pas quelque chose que je peux enlever.
j'ai 2 moyens de contourner le problème, mais ce n'est pas propre du tout...
1) on ajoute un "vertical-align: top;" (ou bottom), au container des 3 div
(s'il n'y avait pas déjà de container prévu, on alourdi le html)
ou
2) on met les 3 div en float,
on ajoute des margin pour les espacer comme avant
(Ça me parait assez galère, et on doit rajouter un clear: both sur l'élément qui suivait les 3 div. Ou alourdir le html pour rajouter le div qui aura le clear)
Du coup je ne suis pas satisfait de ces "solutions"...
Je ne comprends toujours pas ce comportement du "box-sizing: border-box".
Ajoute une bordure de la même couleur que le fond dans la div 1 et 3 :)
.div1 {
background-color: pink;
border: pink 10px solid;
}
.div2 {
background-color: orange;
border: black 10px solid; /* Ajout des bordures */
}
.div3 {
background-color: yellow;
border: yellow 10px solid;
}Salut,
merci pour vos réponses.
@MrCastor:
Ça fait un peut trop "bidouille" ^^
@Kyosuke:
Oui c'est vrai... En fait en mettant le vertical-align (pas sur le container, merci) c'est plutôt propre.
Je crois que ça m'a perturbé de voir que le box-sizing: border-box ne travail qu'en largeur, et pas en hauteur.
Instinctivement j'avais pensé que ça faisait les 2.
Finalement ça c'est très bien :
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.div1, .div2, .div3 {
display: inline-block;
width: 50px;
height: 50px;
vertical-align: bottom; /* Solution : placer un "vertical-align" sur tous les "frères" */
}
.container {
background-color: grey;
}
.div1 {
background-color: pink;
}
.div2 {
background-color: orange;
border: black 10px solid; /* Ajout des bordures */
}
.div3 {
background-color: yellow;
}