CSS : padding et margin, dif­fé­rents for­ma­tages

Les Cascading Style Sheets, plus connus sous l’acronyme CSS, per­met­tent de formater les sites Internet pour leur donner un design spé­ci­fique. Les pro­prié­tés CSS padding et margin per­met­tent de pa­ra­mé­trer la mise en page des éléments HTML pour un meilleur rendu.

Pour com­prendre l’effet des pro­prié­tés CSS padding et margin sur la mise en forme et le design de votre site Web, mieux vaut avoir en tête quelques principes de base en HTML. Dans ce langage, il est possible de créer une série d’éléments dif­fé­rents pour un affichage final sur un site. Parmi ces éléments, on distingue deux groupes : les éléments Inline et les éléments Block.

Les éléments HTML Inline sont des éléments qui se fondent dans le texte de votre site sans avoir besoin de pa­ra­graphe séparé. Les balises em- ou b- en sont des exemples typiques. Dans le script HTML, ces balises per­met­tent d’afficher le contenu en italique ou en gras entre la balise d’ouverture et la balise de fermeture dans le na­vi­ga­teur Web.

Con­trai­re­ment aux éléments Inline, les éléments Block se situent un niveau au-dessus et né­ces­si­tent un pa­ra­graphe propre. Il est possible de se re­pré­sen­ter les éléments Block comme une sorte de cadre qui s’étendrait sur la largeur de l’écran. Il est aussi possible d’adapter la largeur et la hauteur des éléments Block, de manière à agrandir ou rétrécir ce cadre par rapport à l’écran. Les éléments de Block peuvent être définis les uns par rapport aux autres ; ils cons­ti­tuent un élément de base pour la mise en page d’un site Internet. Parmi les éléments typiques de cette catégorie HTML, on peut citer par exemple les en-têtes h1 à h6 ou le conteneur div.

Une fois assimilée la structure de base des dif­fé­rents éléments HTML, il est facile de com­prendre ce que signifie exac­te­ment « padding CSS ». Le padding désigne en effet la marge in­té­rieure entre le contenu d’un élément et ses propres limites. Là encore, on visualise mieux en se re­pré­sen­tant les éléments Block comme des cadres.

Par exemple, si vous créez un conteneur div, les pro­prié­tés CSS padding-top, padding-left, padding-bottom et padding-right désignent chacune la distance entre le contenu textuel et les côtés du cadre créé pour cet élément HTML.

Voici un exemple de code pour illustrer l’ex­pli­ca­tion, avec une in­té­gra­tion de CSS dans HTML :

Il existe plusieurs façons d’utiliser le padding CSS. Une astuce CSS pratique consiste à utiliser des pro­prié­tés rac­cour­cies, appelées aussi shor­thands. L’uti­li­sa­tion de plusieurs pro­prié­tés rac­cour­cies aident à com­pres­ser le code CSS selon les besoins.

La méthode la plus simple consiste à indiquer la marge in­té­rieure souhaitée pour chacun des quatre côtés de l’élément. Pour cela, utilisez les dif­fé­rentes pro­prié­tés CSS padding-top, padding-left, padding-bottom et padding-right. Il est aussi possible d’utiliser la propriété rac­cour­cie suivante :

Dans ce cas, les quatre valeurs sont indiquées en une seule ligne, selon l’ordre padding en haut, padding à droite, padding en bas et padding à gauche.

Quelle que soit la police utilisée, la taille du padding peut s’exprimer en dif­fé­rentes unités. Si vous optez pour les pixels, la valeur choisie sera toujours la même quel que soit l’écran. Si vous tra­vail­lez par exemple avec Media Queries CSS et que vous souhaitez que l’affichage du site s’adapte au­to­ma­ti­que­ment aux dif­fé­rents écrans, on lui préfèrera une autre approche en spé­ci­fiant de nouvelles valeurs pour chaque taille d’écran. Pour s’épargner ce travail fas­ti­dieux, on utilise souvent une in­di­ca­tion en pour­cen­tage de la marge in­té­rieure. Ce pour­cen­tage se réfère à la hauteur ou à la largeur du cadre.

Selon ce que vous souhaitez faire, vous n’avez pas toujours besoin des quatre valeurs pour adapter le padding à votre site. La mention de trois valeurs seulement dans la propriété rac­cour­cie du padding implique que la première valeur cor­res­pond à la marge su­pé­rieure (padding-top), la deuxième valeur à la marge in­té­rieure des côtés (padding-right et padding-left) – enfin la troisième valeur à la marge in­té­rieure du bas (padding-bottom). Un raccourci pratique si le but consiste à centrer ho­ri­zon­ta­le­ment le contenu d’un élément.

Il en va de même pour la mention de deux valeurs seulement, la première se référant aux marges haute et basse, la seconde aux marges droite et gauche.

Vous l’avez deviné : une seule valeur de propriété CSS padding donne la même longueur à chaque marge in­té­rieure de votre cadre. Un bon moyen pour centrer par­fai­te­ment le contenu de l’élément.

Si vous êtes en train d’apprendre le CSS, im­pos­sible de passer à côté de la propriété margin. Celle-ci adapte la mise en page des dif­fé­rents éléments HTML et de votre site Internet. Con­trai­re­ment à padding, margin désigne la distance ex­té­rieure d’un élément par rapport aux éléments voisins ou aux limites du site Internet. Heu­reu­se­ment, la syntaxe de margin est identique à celle de padding, de quoi faciliter leur ap­pren­tis­sage.

Les pro­prié­tés rac­cour­cies pour margin avec quatre, trois, deux ou une seule valeur sont aussi les mêmes que les pro­prié­tés rac­cour­cies pour padding.

La meilleure façon d’illustrer l’es­pa­ce­ment externe margin est de prendre un exemple de code simple en créant deux con­te­neurs div :

Chaque fois que vous cherchez à formater un contenu par rapport à son élément parent, utilisez padding. Dès que vous devez disposer plusieurs éléments entre eux ou par rapport à l’écran (ou la fenêtre), optez pour margin. Dans la pratique, les deux pro­prié­tés CSS sont rarement isolées : en général, on combine padding et margin afin d’obtenir le design de site souhaité. Il suffit pour cela de nommer les deux pro­prié­tés CSS dans le fichier HTML ou CSS et de définir les valeurs cor­res­pon­dantes.