Discussion :

[InovartDéveloppement]

Bonjour à tous

Je vous expose mon problème : suivant un tutoriel sur un livre traitant du responsible design, je suis sur un chapitre concernant des "espacements flexibles", dans ce chapitres ils partent du principe
cible / contexte = résultat, si on souhaite une marge flexible sur un élément, le contexte est la largeur de son contenant.

Dans l'exemple donné, ils prennent un width de 470px, où ils ajoutent 48px de padding de chaque côté, pour arriver à un total de 566px, partant d'un contexte de 900px, donc pour le pourcentage du width nous faisons (566/900) * 100 ce qui nous donnent 62.88888888888889%.

Pour ajouter ensuite le padding de 48px, ils calculent le pourcentage par rapport aux 566px, et non aux 900 du contexte de base. Cela parait logique, mais dans la pratique je me suis aperçu que cela ne fonctionnait pas, à moins de prendre le pourcentage aux 900px.

Depuis ce lien un exemple, où on peut comparer la pratique depuis le contexte de base (test1) et la pratique par rapport au livre (test2).

Si quelqu'un peut m'éclairer sur le sujet, je suis preneur

Merci !

[Muchos]

Leur proposition n'est pas logique ! Le padding se calcule aussi selon le contexte général, comme on le constate sur votre démo.

Pour info, un tel calcul aurait pu être évité en utilisant box-sizing: border-box sur l'élément contenu. Dès lors, vous n'auriez plus qu'à vous concentrer sur la width.