Si le parent d'un élément étant affecté d'un margin, n'a pas de padding, les navigateurs vont automatiquement reporter le margin de l'enfant sur le padding du parent (vous suivez ??).
Le parent sera alors déplacé vers le bas de façon apparemment incompréhensible, puisqu'aucun padding ne lui est directement associé.
Exemple de cas de figure:
.parent{padding:0;} .enfant {margin:10px;}
<div class="parent"> <p class="enfant">Test</p> </div>
Voici une liste non exhaustive des solutions qui s'offrent à nous, à choisir selon votre configuration :
– Ajouter un padding au parent.
– Affecter au parent la propriété CSS overflow:hidden; ou overflow:auto;
– Affecter à l'enfant la propriété : display: inline-block; ou float:left; ou right;
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!