La balise H se comporte comme un DIV. Un DIV est une "division" ou une zone de la page HTML qui contient toute balise; body est un DIV particuliers qui occupe généralement toute la surface de la page HTML; body est subdivisé en divers DIV qui peuvent être fixes ou flottants, en position relative ou absolue... ceci est un très long et vaste sujet (GABARITS CSS Alsacréation) qui dépasse très largement le cadre de cette page.

Parmi de nombreuses propriétés, vous pouvez appliquer à la balise h (comme aux DIV) des marges, des paddings, un fond constitué d'une :

1. simple couleur de fond

<p style="background-color:#e3b148;">1. simple couleur de fond</p>

2. séquence d'image répétée (une simple bande horizontale ou verticale de 1 pixel de haut ou de 1 pixel de large):

<h1 style="background: url(nom et chemin de votre image) repeat; width : 89%; margin: auto;">qui peut donner ceci sur un h1</h1>

qui peut donner ceci sur un h1

Vous pouvez aussi introduire d'autres paramètres comme l'épaisseur de la bordure (la bordure que vous voyez sur l'exemple ci-dessus est obtenue par répétition de l'image de background et non par les codes HTML qui suivent), la hauteur, la largeur, etc... Toutes ces manipulations sont applicables à n'importe quel DIV.

<h5 style="border : 5px solid; border-color : #9d3903; height: 30px; text-align : center; width : 89%; margin: auto; margin-bottom: 50px;">H5 TITRE 5</h5>

ce qui affiche ceci (l'effet de dégradé n'est pas inclu dans le code; voir le code source de cette page) :

H5 TITRE 5

voir aussi bordure

La notion de padding est un peu plus compliquée à concevoir. Le vocable anglais "padding" peut trouver son équivalent français dans "bourre". Il faut alors prendre "bourre" dans sa signification de "remplissage" d'un vide tel qu'il est employé dans le cadre des métiers de la matelasserie et de la cartoucherie. La bourre est cet espace comblé au-dessus de la charge d'une cartouche. En l'occurence, cette image est celle qui répond le mieux à l'une des configuration possible d'un padding : le padding-top.

Ce padding repousse le contenu d'une DIV qui peut être du texte, une image, une ancre, ou une autre DIV vers l'intérieur de cette DIV. Ce contenu, sans cette précision, se collerait, par défaut, au bord de la DIV. Il est alors possible de préciser à quelle distance du bord haut de la DIV, le contenu sera repoussé.

<h5 style="padding-top : 50px; width : 89%; margin: auto;">H5 TITRE 5</h5>

ce qui affiche ceci :

H5 TITRE 5

Le padding appliqué dans l'exemple ci-dessus repousse le texte à 50px au-dessous de ce qui devrait être sont emplacement par défaut..

L'effet d'un padding-bottom est inverse du précédent. L'élément, au lieu d'être repoussé du bord supérieur de la DIV vers l'intérieur, sera repoussé du bord inférieur du DIV vers l'interieur.

<h5 style="padding-bottom : 50px;width : 89%; margin: auto;">H5 TITRE 5</h5>

H5 TITRE 5

Il est également possible de repousser l'élément depuis le côté gauche ou le côté droit de la DIV. Il faut alors utiliser padding-left (gauche) ou padding-right (droite).

margin et padding ont 2 fonctions différentes qu'il n'est pas évident de saisir au premier abord. Il faut simplement avoir en tête que le padding agit à l'INTERIEUR de la DIV alors que le margin agit à l'EXTERIEUR de la DIV. Un margin-top repoussera une DIV placé SOUS une autre DIV, un padding-top repoussera une DIV (ou un élément à l'intérieur de cette DIV) placée DANS une autre DIV.

<h5 style="margin-top : 50px;">H5 TITRE 5 : un margin-top de 50px est appliqué sur ce titre</h5>

H5 TITRE 5 : un margin-top de 50px est appliqué sur ce titre

Vous avez maintenant en main tous les éléments qui vous permettront d'agrémenter vos titres de mille manières mais vous venez aussi de faire quelques pas dans le monde de la mise en page HTML à l'aide de DIV.