Les Margins se comportent comme des Paddings avec les grilles Bootstrap

Voilà les petites bases qu'il faut rapidement se mettre en tête à propos de la différence entre les marges externes ou margins et marges internes ou paddings :

• Les margins d'un élément HTML se superposent avec les margins de leur voisin, avec les margins de leur parents, avec les margins des enfants des voisins, etc. Puisqu'elles se trouvent à l'extérieur des borders, elles ne sont pas affectées par les backgrounds.

• Les paddings d'un élément HTML s'additionnent ou se cumulent avec les paddings de leur voisins, avec les paddings de leur parents, avec les paddings des enfants des voisins etc. Puisqu'elles se trouvent à l'intérieur de border, elles sont affectées par les backgrounds.

Deux trois autres chose rapide sont à savoir : comme le fait qu'un élément inline ne gère pas les paddings ou qu'un margin négatif déplace les éléments contrairement au padding négatif qui ne fait rien, etc.

Mais saviez-vous que : Si les éléments deviennent flottants en continuant de prendre toute la largeur... les marges externes se comportent comme les marges internes !

Guide pour constater le problème

Petite architecture de test

Nous allons tester ce HTML :

<p>1. p voisin haut</p>
<p>1. p voisin bas</p>
<p>2. p voisin de div haut</p>
<div>
  <p>2. p haut enfant de div et entre deux p</p>
  <p>2. p bas enfant de div et entre deux p</p>
</div>
<p>2. p voisin de div bas</p>
<div>
  <p>3. p enfant de div qui est voisin haut</p>
</div>
<div>
  <p>3. p enfant de div qui est voisin bas</p>
</div>

avec des marges externes ou margins :

* {
  margin: 0;
  padding: 0;
}
p {
  margin: 10px 0;
}
div {
  margin: 10px 0;
  background-color: #d9d9ff;
}

avec des marges internes ou paddings :

* {
  margin: 0;
  padding: 0;
}
p {
  padding: 10px 0;
}
div {
  padding: 10px 0;
  background-color: #d9d9ff;
}

et avec des margins et des floats :

* {
  margin: 0;
  padding: 0;
}
p {
  margin: 10px 0;
  width: 100%;
  float: left;
}
div {
  margin: 10px 0;
  background-color: #d9d9ff;
  width: 100%;
  float: left;
}

Test live !

Par défaut dans notre exemple, tous les div et p ont les margings et paddings à 0. Vous êtes en mode margin par défaut sans que rien ne flotte. Les p ont un fond transparent mais les div ont un fond violet. Vous pouvez appréhender l'architecture HTML de cette exemple juste au dessus.

Constater la superposition des Margins

En passant votre souris sur les éléments, vous pouvez constater la superposition des margins (marges externes). Les p sont oranges, les div sont violettes foncées, et la superposition fait apparaître du marron. Si vous cochez les checkboxs, vous maintiendrez l'effet même en enlevant votre souris. La première case représente le p, la seconde la div.

Constater l'addition des Paddings

Avec le menu en haut à droite, « Basculer en mode padding » en cliquant, et constatez que les marges internes s'additionnent. N'hésitez pas à cocher les cases pour maintenir l'effet.

Les Margins se comportent comme des Paddings sur les éléments en Float

Maintenant « Activez les flottants » tout en restant en « Mode Margin » et, ô surprise, nos margins se comportent maintenant comme des paddings ! Les margins ne se superpose plus mais s'additionne. Et pourtant bien des marges externes.

Les Backgrounds ne sont pas affectés

Avec les flottants actif, et avec le menu en haut à gauche, alternativement, « Basculer en mode padding » et « Basculez en mode margin » pour remarquer que le background rouge associé aux div borde les enfants dans un cas, et englobe le padding dans l'autre.

Petite discussion Bootstrap

Pour en venir à Bootstrap et sa grille, vous vous êtes peut-être déjà fait la réflexion suivante ou quelqu'un vous la faites :

« Il ne sert à rien d'écrire : »

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h1>Ceci est le titre</h1>
        </div>
        <div class="col-xs-12">
            <h2>Ceci est le sous-titre</h2>
        </div>
    </div>
</div>

« il faut plutôt écrire : »

<div class="container">
    <h1>Ceci est le titre</h1>
    <h2>Ceci est le sous-titre</h2>
</div>

« C'est là même chose. »

Et bien avec ce billet, sachez que, puisque .col-xs-12 et toutes ses déclinaisons sont des flottants, dans le premier cas les marges externes vont se superposer, alors que dans le second cas elles vont s'additionner.

Ainsi si sur certaine page censée être identique vous devez juste ajouter en regard du titre un lien pour filtrer les résultats de page :

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h1>Ceci est le titre</h1>
        </div>
       <div class="col-sm-6 text-right">
            <a href="">Filtrer les résultats</a>
        </div>
        <div class="col-xs-12">
            <h2>Ceci est le sous-titre</h2>
        </div>
    </div>
</div>

avec le premier cas cité il n'y aura aucun changement si ce n'est l'ajout du lien alors qu'avec le second cas cité, le titre sera plus espacé du sous-titre sur les pages avec filtre et moins espacé sur les pages sans filtre.

La praticité de Bootstrap nous met malheureusement face à une abstraction qui fuie !