Problème de marges...

Bonjour,
cela fait un bout de temps que je fais des recherches et essaye de comprendre le fonctionnement étrange des margin/padding, mais rien à faire...

Tout d'abord mon premier problème, c'est lorsque je veux centrer verticalement une div imbriquée dans une autre, rien de bien compliqué et plusieurs solutions existent, mais j'aimerais utiliser la plus "logique" pour moi, celle de rajouter un margin au contenu pour qu'il "s'écarte" du conteneur.
Voici un exemple ou il existe un conteneur de hauteur 80px, avec un contenu de 60px possédant un margin haut et bas de 10px. Ce margin, au lieu de s'appliquer sur le contenu par rapport au conteneur, semble s'applique sur le conteneur par rapport à l’intégralité de la page...
La perte de logique commence ici : https://jsfiddle.net/uLdn4L1z/

Après avoir joué de toutes les manières possible, au lieu de découvrir des solutions, je découvre de nouveaux problèmes...cette fois pour le padding.
Le padding est censé être la marge intérieure, donc site je possède un conteneur, un sous-conteneur et un contenu, et que j'applique un padding au sous-conteneur, seul le contenu est censé être "déplacé"...
Alors pourquoi, au lieu de simplement déplacer le contenu à l'intérieur de celui-ci, le sous-conteneur s'agrandit-il lui même après l'ajout d'un padding ? : https://jsfiddle.net/wcyv0owu/
Le padding ne dit-il pas simplement : "Toi, reste à X-X-X-X distance de mes barreaux" ?

J'ai même vu des scripts JS applicable sur son site web permettant un calcul "logique" des marges intérieurs/extérieurs, cela voudrait-il dire que le système a été "mal" fait ?


Merci d'avance pour votre aide,
Nikorwell.

Bonjour,

Vous vous en doutez : si le web fonctionne sans que les sites implosent à l'affichage c'est qu'il y a des règles pérennes, même si ces dernières ne sont pas toujours faciles à appréhender...

- Le margin est l'espace extérieur a un élément. Les marge d'un élément peuvent fusionner avec celle de l'élément voisin, et (apparement) peuvent s'annuler avec un conteneur. Margin peut servir à centrer horizontalement un élément block avec la déclaration 'margin: 0 auto'. Un élément en 'dispaly:table' ne peut pas avoir de marge.
- Le padding est l'espace intérieur à un élément, il rentre en compte dans le calcul de la taille de l'élément. Pour éviter cela il faut appliquer au conteneur la règle 'box-sizing: border-box'.

Exercices corrigés (Attention à vos déclarations dans les valeurs raccourcies) :
Exemple 1
Exemple 2

Nikorwell a écrit :
Merci beaucoup, cela a suffit à tout régler, mais bon, il est vrai que la logique n'est pas celle qu'on croit lors de l'apprentissage des marges

Et oui. Je me souviens de mes débuts en CSS... toute une histoire. Bonne continuation pour la suite.

Olivier C a écrit :
Bonjour,
- Le margin est l'espace extérieur a un élément. Les marge d'un élément peuvent fusionner avec celle de l'élément voisin, et (apparement) peuvent s'annuler avec un conteneur. Margin peut servir à centrer horizontalement un élément block avec la déclaration 'margin: 0 auto'. Un élément en 'dispaly:table' ne peut pas avoir de marge.

Quelques précisions:
1) Les tables ou éléments en display: table peuvent avoir des marges, ce sont les lignes et cellules (row/table-cell) qui ne peuvent en avoir.
2) Seules les marges verticales fusionnent.
3) les éléments en display: inline-block, en float ou en position autre que «static» ne fusionnent jamais
4) Un overflow autre que visible, un padding ou une bordure sur le parent annulent la fusion des marges (avec le parent)
5) Lors d'une fusion, c'est la marge la plus grande qui devient la marge unique des deux éléments
6) La fusion avec le parent peut provoquer un effet boule de neige. Une fois fusionnée, cela peut donner une marge au parent qui peut alors fusionner avec son propre parent:

<style>
  section, div { margin: 0; }
  p { margin: 2em 0; }
</style>
<!-- les marges supérieures et inférieures des <p> fusionnent avec leur parents qui fusionnent avec leur parent. Les <section> se retrouvent avec des marges qui fusionnent entre elles -->

<!-- marge de 2 em -->
<section><div><p>TEST</p></div></section>
<!-- marge de 2 em -->
<section><div><p>TEST 2</p></div></section>
<!-- marge de 2 em -->

Modifié par kustolovic (25 Mar 2015 - 00:38)

Merci pour ces précisions @kustolovic, elles valaient le coup d'être (re)lues.