Médiaforma

All posts tagged padding

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, je vais vous montrer comment faire une mise en page sur deux colonnes. La première de largeur fixe et la deuxième qui occupe le reste de l’espace horizontal disponible.

Vous vous en doutez certainement : chacune des colonnes sera représentée par une balise <div>. Le document HTML est des plus classiques. Il contient deux balises <div> d’identifiant col1 et col2 et un texte quelconque est placé dans chacune des balises.

Le code CSS est bien plus intéressant.

Les lignes 1 à 7 définissent les caractéristiques de la première balise <div>. Cette dernière sera flottante, sur le côté gauche de la fenêtre. Elle aura une largeur de 200 pixels, une couleur spécifique et une marge intérieure de 10 pixels.

Les lignes 9 à 14 précisent les caractéristiques de la deuxième balise <div>. En définissant une marge à gauche de 220 pixels, cette balise s’insère à droite de la première balise <div>. Vous vous demandez peut-être pourquoi avoir défini une marge de 220 pixels et non de 200 pixels, puisque la première balise <div> est large de 200 pixels. Ajoutez à ces 200 pixels la marge gauche de 10 pixels et la marge droite de 10 pixels de la première balise <div> et vous obtenez une marge de 220 pixels. La ligne 12 définit la couleur d’arrière-plan de la deuxième balise <div> et la ligne 13 sa marge intérieure.

Il ne reste plus qu’à afficher le document HTML dans un navigateur. Lorsque l’on redimensionne la fenêtre du navigateur, la deuxième balise <div> s’étire pour occuper tout l’espace horizontal qui lui est donné.


Deux propriétés CSS permettent de définir l’espace autour des éléments de type box : margin et padding :

  • margin définit l’espace entre un élément et les autres éléments qui l’entourent ;
  • padding définit l’espace entre la bordure de l’élément et son contenu.

Il est possible de définir des marges supérieure, inférieure, gauche et droite en accolant (respectivement) les suffixes top, bottom, left et right aux mots-clés margin et padding et en les séparant par un tiret.

Examinons le code suivant :

Deux balises <div> de classe conteneur et interieur sont imbriquées. Ces classes contiennent un peu de texte issu du site http://fr.lipsum.com/.

La classe conteneur définit une couleur d’arrière-plan rose pâle et fixe les dimensions de la balise.

La classe interieur définit une couleur d’arrière-plan jaune pâle, une bordure noire épaisse de deux pixels, des marges extérieures de 10 pixels et des marges intérieures de 40 pixels.

Voici le résultat dans Internet Explorer :

Les quatre marges intérieures étant identiques, les quatre propriétés padding peuvent se résumer à une seule :

padding: 40px;

Il en va de même pour les marges extérieures qui se résument en :

margin: 10px;

Supposons maintenant que nous voulions utiliser les marges intérieures suivantes :

  • Gauche : 40px ;
  • Droite : 41px ;
  • Supérieure : 42 px :
  • Inférieure : 43px.

La forme condensée de la propriété padding sera :

padding: 42px 41px 43px 40px;

Vous voyez donc que les quatre marges sont spécifiées dans l’ordre suivant : haut, gauche, bas et droite. Pour retenir cet ordre, imaginez que vous partez d’en haut et que vous décrivez un cercle dans le sens inverse des aiguilles d’une montre.

Il en va de même en ce qui concerne les marges extérieures. Supposons que nous voulions utiliser les marges extérieures suivantes :

  • Gauche : 10px ;
  • Droite : 11px ;
  • Supérieure : 12 px :
  • Inférieure : 13px.

La forme condensée de la propriété margin sera :

margin: 12px 11px 13px 10px;

Supposons maintenant que les marges extérieures gauche et droite soient identiques et égales à 15 pixels, et que les marges extérieures supérieure et inférieure soient identiques et égales à 20 pixels. La propriété margin pourra être condensée comme ceci :

margin: 20px 15px;

Cette remarque s’applique également aux marges intérieures.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

La balise <blockquote></blockquote> permet de différentier un bloc de texte du texte courant. Il suffit d’entourer le bloc de texte concerné par les balises <blockquote> et </blockquote> pour le mettre en retrait :

Dans cet exemple, le document est constitué de deux paragraphes identiques. Le premier occupe toute la largeur de la fenêtre. Le deuxième, placé entre les balises <blockquote> et </blockquote> subit un retrait à droite et à gauche :

Si cette mise en forme n’est pas suffisante, vous pouvez la compléter par quelques instructions CSS.

Pour cela, il suffit de redéfinir le style blockquote. Vous pourriez par exemple :

  • augmenter les marges à gauche et à droite du texte en agissant sur les propriétés margin-left et margin-right (lignes 7 et 8) ;
  • ajouter une indentation sur la première ligne du bloc de texte (ligne 9) ;
  • modifier la couleur du texte (ligne 10) ;
  • afficher le texte en italique (ligne 11) ;
  • ajouter une bordure autour du texte (lignes 12 à 14). Ici, la bordure est solide, épaisse de 1 pixel et de couleur bleu ciel ;
  • ajouter une marge intérieure entre le texte et la bordure (ligne 15).

Voici le résultat dans Internet Explorer :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette section, nous allons définir un design sur trois colonnes. La première colonnes sera ancrée à gauche et aura une largeur fixe. La troisième colonne sera ancrée à droite et aura une largeur fixe. Quant à la deuxième colonne, elle occupera tout l’espace laissé libre par les deux autres colonnes.

Le code HTML est rudimentaire : il contient trois balises <div> consécutives, remplies avec un peu de texte :

Le code CSS est bien plus intéressant.

Les lignes 1 à 7 définissent les caractéristiques de la première balise <div>. La colonne est flottante, ancrée à gauche, large de 200 pixels, a une couleur spécifique et une marge interne de 10 pixels.

Les lignes 9 à 15 définissent les caractéristiques de la troisième balise <div>. La colonne est flottante, ancrée à droite, large de 250 pixels, a une couleur spécifique et une marge interne de 10 pixels.

Enfin, les lignes 17 à 23 définissent les caractéristiques de la deuxième balise <div>, qui se trouve entre les deux colonnes flottantes gauche et droite. Cette balise est décalée de 220 pixels à gauche, c’est-à-dire de la largeur de la balise flottante gauche augmentée de ses marges internes. Elle est également décalée de 270 pixels à droite, c’est-à-dire de la largeur de la balise flottante droite augmentée de ses marges internes. Tout comme les deux autres <div>, cette balise a une couleur spécifique et une marge interne de 10 pixels.

Affichons le résultat du code HTML dans un navigateur. Comme vous pouvez le voir la première et la troisième colonne sont ancrées sur les bords gauche et droit de la fenêtre. Quant à la deuxième colonne, elle occupe toute la largeur disponible lorsque la fenêtre est redimensionnée.