Les marges

Parent Previous Next


Les marges




Il faut savoir que tous les blocs possèdent des marges. Il existe deux types de marges :

Regardez bien le schéma qui se trouve à la figure suivante.

Marges extérieure et intérieure

Sur ce bloc, j'ai mis une bordure pour qu'on repère mieux ses frontières.

En CSS, on peut modifier la taille des marges avec les deux propriétés suivantes :

Les balises de type inline possèdent également des marges. Vous pouvez donc aussi essayer ces manipulations sur ce type de balises.


Pour bien voir les marges, prenons deux paragraphes auxquels j'applique simplement une petite bordure (figure suivante) :

p

{

    width: 350px;

    border: 1px solid black;

    text-align: justify;

}



Marges par défaut sur les paragraphes



Comme vous pouvez le constater, il n'y a par défaut pas de marge intérieure (padding). En revanche, il y a une marge extérieure (margin). C'est cette marge qui fait que deux paragraphes ne sont pas collés et qu'on a l'impression de « sauter une ligne ».


Les marges par défaut ne sont pas les mêmes pour toutes les balises de type block. Essayez d'appliquer ce CSS à des balises <div> qui contiennent du texte, par exemple : vous verrez que, dans ce cas, il n'y a par défaut ni marge intérieure, ni marge extérieure !


Supposons que je veuille rajouter une marge intérieure de 12 px aux paragraphes (figure suivante) :

p

{

    width: 350px;

    border: 1px solid black;

    text-align: justify;

    padding: 12px; /* Marge intérieure de 12px */

}



Une marge intérieure ajoutée aux paragraphes



Maintenant, je veux que mes paragraphes soient plus espacés entre eux. Je rajoute la propriété  margin pour demander à ce qu'il y ait 50 px de marge entre deux paragraphes (figure suivante) :

p

{

   width: 350px;

   border: 1px solid black;

   text-align: justify;

   padding: 12px;

   margin: 50px; /* Marge extérieure de 50px */

}



Une marge extérieure ajoutée aux paragraphes


Mais ??? Une marge s'est rajoutée à gauche aussi !

Eh oui, margin (comme padding d'ailleurs) s'applique aux quatre côtés du bloc.
Si vous voulez spécifier des marges différentes en haut, en bas, à gauche et à droite, il va falloir utiliser des propriétés plus précises… Le principe est le même que pour la propriété border, vous allez voir !


En haut, à droite, à gauche, en bas… Et on recommence !


L'idéal serait que vous reteniez les termes suivants en anglais :

Ainsi, vous pouvez retrouver toutes les propriétés de tête.
Je vais quand même vous faire la liste des propriétés pour margin et padding, histoire que vous soyez sûrs que vous avez compris le principe.

Voici la liste pour margin :

Et la liste pour padding :

Il y a d'autres façons de spécifier les marges avec les propriétés margin et padding. Par exemple :
margin: 2px 0 3px 1px; signifie « 2 px de marge en haut, 0 px à droite (le px est facultatif dans ce cas), 3 px en bas, 1 px à gauche ».
Autre notation raccourcie : margin: 2px 1px; signifie « 2 px de marge en haut et en bas, 1 px de marge à gauche et à droite ».


Centrer des blocs


Il est tout à fait possible de centrer des blocs. C'est même très pratique pour réaliser un design centré quand on ne connaît pas la résolution du visiteur.

Pour centrer, il faut respecter les règles suivantes :


Essayons cette technique sur nos petits paragraphes (lignes 3 et 4) :

p

{

    width: 350px; /* On a indiqué une largeur (obligatoire) */

    margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */

    border: 1px solid black;

    text-align: justify;

    padding: 12px;

    margin-bottom: 20px;

}

Et voici le résultat à la figure suivante.



Centrage des paragraphes



Ainsi, le navigateur centre automatiquement nos paragraphes !

Il n'est cependant pas possible de centrer verticalement un bloc avec cette technique. Seul le centrage horizontal est permis.


Créé avec HelpNDoc Personal Edition: Générateur complet de livres électroniques ePub