CSS3 – margin et padding

LEÇON

 

Le box model du CSS

Tous les éléments dans un document HTML s'affichent en forme rectangulaire, comme des boîtes.

Que l'on parle de texte, ou d'images, ou de combinaisons des deux dans les sections div, l'affichage est toujours basé sur des rectangle concentriques avec le contenu au centre, entouré éventuellement de l'espace et/ou d'un cadre.

La taille des espaces est configurée via les propriétés margin et padding. Les cadres sont spécifiés avec la propriété border.

Visuellement, le box model se présente ainsi :

css_margin_padding_box_model

Explications :

  • la zone "contenu" est la zone où apparaît le(s) texte(s) et/ou image(s)
  • le fond (background) s'étend sur les zones du contenu et du padding
  • margin = de l'espace transparent en dehors du cadre : utile pour espacer les éléments entre eux
  • padding = de l'espace transparent à l'intérieure du cadre : utile pour donner de l'espace entre le contenu et le cadre ou entre le contenu et le bord du fond
  • border est utilisé pou le cadre, et peut avoir une épaisseur

 

[ Remarque : on verra plus tard, avec la propriété float, qu'un élément peut entourer d'autres (texte qui coule autour d'une image par exemple). Dans ce cas l'affichage de l'élément qui entoure n'est pas strictement rectangulaire. ]

 

Exemple 1 :

 

body
{
  background-color:#f8f8f8;
}

p
{
  background-color:pink;
  margin:50px;
  border:20px solid #d0e0e0;
  padding:150px;
}

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Margin et padding</title>
        <link rel="stylesheet" type="text/css" href="exemple1.css">
    </head>
    <body>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida ipsum in nisl rhoncus, nec egestas ligula fermentum. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis. Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis orci vitae arcu pulvinar, ac pellentesque ligula vulputate.
        </p>
    </body>
</html>

 

css_margin_padding_exemple1

Remarquer :

  • la couleur de fond de l'élément s'applique au contenu et à la zone padding
  • le margin est transparent - on voit la couleur du fond de la page (élément body) à travers le margin

 

IMPORTANT : Les marges ne s'additionnent pas pour 2 éléments adjacents

 

Remarquer dans l'exemple ci-dessous que la marge entre les 2 paragraphes est 50 pixels au lieu de 100 pixels.

Exemple 2 :

 

body
{
  background-color:#f8f8f8;
}

p
{
  background-color:pink;
  margin:50px;
  border:20px solid #d0e0e0;
  padding:20px;
}

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Margin et padding</title>
        <link rel="stylesheet" type="text/css" href="ex2.css">
    </head>
    <body>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida ipsum in nisl rhoncus, nec egestas ligula fermentum. Proin at est id est placerat volutpat. Cras nisl sem, facilisis nec tortor in, volutpat suscipit nisi. Praesent congue blandit arcu, non luctus odio tempus ut. In ullamcorper lacinia lectus eget mattis.
        </p>
        <p>
          Vivamus varius purus eget placerat tempor. Praesent ut bibendum mi, convallis vestibulum sem. Duis venenatis velit sit amet egestas aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis orci vitae arcu pulvinar, ac pellentesque ligula vulputate.
        </p>
    </body>
</html>

css_margin_padding_exemple2

 

Top - right - bottom - left

Les rectangles dans le box model ne sont pas obligatoirement symétriques. On peut définir individuellement les 4 valeurs différentes pour la largeur des 4 côtés du padding, margin et/ou border.

Exemple :

 

.ma-classe-1
{
  margin:50px;
  padding:20px 30px;
}

.ma-classe-2
{
  margin:2px 3px 4px 5px;
}

 

Remarques :

  • dans ma-classe-1 le margin pour les 4 côtés est identique : 50 pixels
  • dans ma-classe-1 le padding pour le haut et le bas est 20 pixels, pour la droite et la gauche 30 pixels
  • dans ma-classe-2 le margin est différent pour les 4 côtés : 2, 3, 4, et 5 pixels pour le haut, la droite, le bas et la gauche respectivement

 

Comment lire ces suites de tailles :

  • 1 valeur : ça s'applique partout
  • 2 valeurs : haut/bas, puis droite/gauche
  • 4 valeurs : valeurs individuelles à lire dans l'ordre depuis le haut et ensuite comme un horloge : haut, droite, bas, gauche

 

Définir les valeurs côté par côté

On peut aussi spécifier une valeur pour un côté uniquement.

Remarques : les bordures ont 3 caractéristiques différentes (width, style et color), chacune avec leur valeur - donc les possibilités pour les bordures sont plus nombreuses.

Exemple :

 

.ma-classe-1
{
  margin-top:50px;
  padding-left:20px;
}

.ma-classe-2
{
  border-bottom:1px solid black;
  border-top-width:12px;
  border-right-color:red;
  border-left-style:dotted;
}

 

Largeur du contenu et la vraie taille du box

IMPORTANT : la hauteur/largeur (height/width) d'un élément qu'on spécifie dans le CSS ne concerne que la partie contenu. Pour connaître la vraie hauteur/largeur il faut prendre en compte les margin, padding et border.

Par exemple :

.ma-classe
{
  width:400px;
  height:300px;
  padding:20px 30px;
  border:3px solid pink;
  margin:10px;
}

Largeur réelle = 400 + (2 x 30) + (2 x 3) + (2 x 10) = 486 pixels

Hauteur réelle = 300 + (2 x 20) + (2 x 3) + (2 x 10) = 366 pixels

 

Margin auto

Pour centrer un élément dans la page (quelque soit la largeur du navigateur), ou dans son conteneur, on utilise margin auto.

Exemple :

body
{
  width:990px;
  margin:0 auto;
}

Le résultat de ces instructions sera que le body de la page sera 990 pixels de large, et centré (gauche/droite) dans la fenêtre du navigateur. Les marges haut/bas sera de 0 pixels.

Remarque : pas besoin de spécifier des unités quand la valeur d'une largeur est zéro.

 

Background-image et margin auto au niveau body

Pour centrer tout le contenu sur la page, avec une image de fond qui couvre la page, on utilise cette approche au niveau body :

body
{
  width:990px;   /* la largeur du contenu de la page - ce contenu sera centré */
  margin:0 auto; /* le zero peut être autre chose si on veut de la marge en haut/bas */
  background-image:url('url/ou/chemin/vers/mon_image_de_fond.jpg');  /* Si on met un chemin il doit êtrerelatif au fichier css. */
}

 

Exemple :

 

body
{
  background-image:url('http://www.web-design-codex.fr/wp-content/uploads/2014/10/sample_tilebg.jpg');
  width:750px;
  margin:20px auto;
  font-weight:normal;
  font-size:20px;
}

.wrapper
{
  background-color:white;
  margin:50px 0px;
  border:2px solid black;
  padding:40px;
}

.myclass
{
  background-color:pink;
  margin:50px 20px;
  border:2px solid black;
  padding:40px;
}

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Background-image et margin auto au niveau body</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
	  Body avec background-image:url('http://www.web-design-codex.fr/wp-content/uploads/2014/10/sample_tilebg.jpg'); width:750px; margin:20px auto;<br><br>
	  IMPORTANT : Remarquer que le background du body s'étend sur toute la page y compris les marges du body.<br><br>
	  Tandis que le background des div ci-dessous ne s'étend que jusqu'à la bordure (ne s'étend pas sur les marges)!
	  <div class="wrapper">
	    Div type 1 avec background-color:white; margin:50px 0px; border:2px solid black; padding:40px;
        <div class="myclass">
          Div type 2 avec background-color:pink; margin:50px 20px; border:2px solid black; padding:40px;
        </div>
		<div class="myclass">
          Div type 2 avec background-color:pink; margin:50px 20px; border:2px solid black; padding:40px;
		</div>
	  </div>
    </body>
</html>

 

Qui donne :

body_background_image_et_margin_auto

 


 

EXERCICES

 

1. Pour chaque cas, de quelle taille est le margin à gauche ?

  • margin:40px;
  • margin:30px 50px;
  • margin:20px 10px 25px 15px;
  • margin:20px 10px 25px;

2. Créer une page en HTML/CSS avec

  • un texte en blanc dans un rectangle fond bleu, et un cadre vert
  • un texte en noir dans un rectangle fond blanc, et un cadre gris qui est large en haut et en bas, et fin à gauche et à droite
  • une image entouré de l'espace blanc (fin en haut et en bas, large à gauche et à droite) et un cadre en jaune
  • deux images, chacune encadrée d'une fine ligne grise, avec de la marge entre elles de 20 pixels
  • une image sans espace blanc autour, et un cadre de 4 couleurs et 4 épaisseurs différents
  • deux paragraphes (deux fois la balise p) sans espace entre eux

3. Créer une page en HTML/CSS avec du contenu centré et une image de fond qui s'étend sur toute la page.