28172 sujets

CSS et mise en forme, CSS3

[Résolu] [BUG] box-sizing et margin

Bonjour à la communauté,

Depuis deux jours je rencontre un problème que je n'avais pas jusqu'alors.
Voici le code sur jsfiddle pour plus de simplicité : https://jsfiddle.net/1p0Lmj6b/17/

*{
  box-sizing: border-box;
}
body{
  width: 100%;
  max-width: 1000px;
  margin: auto;
  border: 4px solid #000;
  background-color: #333;
}
.block{
  width: 100%;
  max-width: 1000px;
  background-color: #fefefe;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 50px;
}


Normalement, la class .block est a 100%, prenant en compte margin et padding (box-sizing). Or lorsque mon block dépasse le body, il se met bien à 100%, mais la marge de droite n'est plus prise en compte dans le calcul. Ce qui provoque un débordement par la droite et évidemment des soucis de mise en page.

Je suis allée voir la doc de box-sizing, il n'y a pas eu de modifications effectuées.
Peut-être un bug temporaire ?

Qu'en pensez-vous ?

Edit : le problème se "corrige" en mettant la classe block à max-width:100%. Là, le box-sizing fait le job. Mais du coup, on ne peut plus fixer une largeur max. Ce qui ne m'arrange pas, à moins de passer par les media-query. Beaucoup de code en plus pour pas grand chose.


.block{
  width: 100%; 
  max-width: 100%; 

  /* ancien code
  width: 100%;
  max-width: 1000px;*/

  background-color: #fefefe;
  border: 1px solid #ddd;
  padding: 10px;
  margin: 50px;
}

Modifié par J_B (09 Nov 2021 - 10:04)
Bonjour Laurent,

Alors là !
Ça fait 12 ans que je suis dans le métier et je n'ai jamais rencontré ce problème !

En plus j'ai lu la doc, je me suis arrêté à ça :
a écrit :

Ici, les dimensions de l'élément sont calculées comme suit : largeur = bordure + marge interne + largeur du contenu, et hauteur = bordure + marge interne + hauteur du contenu.

Supposant que la marge interne était la marge du block interne ...

Merci !

C'est bon je sais où est mon problème.
Je faisais : 

width:100%;
max-width: 1000px;

alors que c'est : 

width:1000px;
max-width:100%

Ce matin j'ai mis un sachet de thé dans la tasse de café de mon mari, et j'ai fait débordé le cacao de mon fils ... C'est la journée des boulettes faut croire !! Smiley lol Smiley lol Smiley biggol Smiley biggol

Merci et désolée pour ce post inutile du coup (mais qui m'a fait gagné du temps !!)
Modifié par J_B (09 Nov 2021 - 10:18)
Modérateur
J_B a écrit :


Merci et désolée pour ce post inutile du coup (mais qui m'a fait gagné du temps !!)


mais non, y a des jours boulettes et des jours sans , c'est comme ça Smiley smile .
Le width:100% est généralement inutile et source de boulettes sur les élément de type block , genre quand il y a des marges externes en sus. autant laisser le width dans le paquet .

Cdt
Modifié par gcyrillus (09 Nov 2021 - 15:12)
Modérateur
J_B a écrit :
Supposant que la marge interne était la marge du block interne ...

Et ouais en le lisant jme suis justement dit que c'était ça qui avait du te mélanger. Ils ont pas été cool d'appeler le padding la "marge interne" haha c'est pour voir si on suit Smiley lol

J_B a écrit :
désolée pour ce post inutile du coup (mais qui m'a fait gagné du temps !!)

Si ca fait gagner du temps c'est que c'est pas inutile !

Bonne journée
Bonjour,
je profite de ce post, pas inutile tant les débordements sont parfois difficiles à régler.
Il y a un peu plus d'une semaine, j'avais parlé du problème de débordements sur ma page, qui rendaient cette dernière instable sur les mobiles. J'ai suivi les conseils de gcirillus qui m'ont bien servis pour rectifier les valeurs que j'avais mises, notamment les width 100% et autres.

Il manquait pourtant l'une d'entre elles, que j'avais oubliée, et qui a tout réglé d'un seul coup :
body {
  padding: 0;
  margin: 0;
  min-height: 100vh;}

(ce qui n'empêchait pas de rectifier ce qui n'allait pas ailleurs).
Sujet clos
Aller à