Login

Bienvenue sur le site de Jef

Les bases du CSS

Les marges intérieures

Définition des marges intérieures

Pour cela nous allons utiliser padding: avec une ou plusieurs valeurs en pixel(px), em ou %.

Les codes possibles sont:

Lorsque l'on utilise l'identificateur "padding", il faut lui spécifier une, deux, trois ou quatre valeurs, que le navigateur interprète différemment en fonction de leur nombre, comme l'indique la liste suivante :

Dans l'exemple qui suit, il n'est donné qu'une seule valeur à padding.

{ padding:50px; }
est équivalent à
{ padding:50px 50px 50px 50px; }

Si il est spécifié 4 valeurs, l'ordre se fera dans le sens des aiguilles d'une montre en commençant par le haut.
c'est à dire, les valeurs du haut(top), de droite (right), du bas (bottom) et de gauche (left) :
padding: valeur-haute valeur-droite valeur-bas valeur-gauche;
Ainsi:

{ padding:10px 50px 40px 20px; }
est équivalent à
{ padding-top:10px; padding-right:50px; padding-bottom:40px; padding-left:20px; }
Il est aussi possible de ne donner que 2 valeurs.
Comme par exemple:
{ padding:3em 5em; }
qui est équivalent à
{ padding:3em 5em; 3em 5em; }
qui est aussi équivalent à
{ padding-top:3em; padding-right:5em; padding-bottom:3em; padding-left:5em; }
Comme les styles s'exécutent en cascade, il est possible de coder par exemple:
{ padding:10px; padding-bottom:50px;}
qui est équivalent à
{ padding:10px 10px 50px 10px;}
ou équivalent à
{ padding-top:10px; padding-right:10px; padding-bottom:50px; padding-left:10px; }
Ce qui signifie que l'on défini dans un premier temps un padding égal de 10px partout, puis que l'on remplace la valeur de padding-bottom par 50px.
Les combinaisons sont multiples...

Marge intérieure égale

Avec, par exemple, un margin de 20px tout autour, un padding de 10px tout autour.

 

Contenu
blablabla

Code CSS:

.boite { width:150px;
         height:auto; 
         margin:20px; 
         padding:10px; }
Code html:
<div class="boite">
<p>Contenu<br />blablabla</p>
</div>


Marges intérieures différentes

Dans cet exemple, nous allons définir un padding de: 10px en haut, 15px à droite, 40px en bas et 2px à gauche.

 

Contenu
blablabla

Code CSS:

.boite { width:150px;
         height:auto; 
         margin:60px 30px 20px 2px; 
         padding:10px 15px 40px 2px; }
Code html:
<div class="boite">
<p>Contenu<br />blablabla</p>
</div>


retour haut de page