décalage avec box-sizing

Par SLK, il y a 10 ans

Les bases HTML/CSS

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

Crazyweeds, il y a 10 ans

il faut que tu enleves le style que tu as appliqué sur " * "

SLK, il y a 10 ans

Salut CrazyWeeds,

Mais moi je veux le "border-box" justement, ce n'est pas quelque chose que je peux enlever.

SLK, il y a 9 ans

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".

MrCastor, il y a 9 ans

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; }
Kyosuke, il y a 9 ans

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 ?

https://jsfiddle.net/Ky0suke/m03yuL5g/

SLK, il y a 9 ans

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; }