Le plus souvent, pour spécifier la taille des retraits dans les pages HTML, les capacités du langage CSS (Cascading Style Sheets) sont utilisées. Bien que dans le langage HTML lui-même, il existe plusieurs vestiges "rudimentaires", permettant dans certains cas de définir l'indentation. Vous trouverez ci-dessous les options les plus utilisées, mais à part elles, il existe encore de nombreux types d'astuces qui vous permettent de définir des retraits pour le balisage non standard des documents HTML.
Il est nécessaire
Connaissance de base des langages HTML et CSS
Instructions
Étape 1
Déterminez l'élément de page à partir duquel mettre en retrait. Par exemple, si le texte est placé à l'intérieur de la balise … (bloc), alors ce bloc sera l'élément parent de ce texte et le retrait doit être compté à partir des bordures du bloc. Et si le texte (ou l'image) n'est à l'intérieur d'aucun élément bloc (div, li, etc.) ou en ligne (span, p, etc.), alors son parent sera le corps du document (balise body). Définir un élément parent pour le texte est nécessaire car c'est lui qui doit définir les descriptions des styles qui forment les retraits. Supposons que votre texte soit placé à l'intérieur d'un bloc div: exemple de texte
Étape 2
Utilisez la propriété margin du langage CSS pour définir les marges, c'est-à-dire la distance entre les bordures d'un élément et les éléments adjacents, ainsi que les bordures de l'élément parent. Cette distance peut être réglée séparément pour le rembourrage de chaque côté: marge-haut - en haut, marge-droite - à droite, marge-bas - en bas, marge-gauche - à gauche. Pour l'exemple ci-dessus, ce code CSS pourrait ressembler à ceci: div {
marge supérieure: 10px;
marge droite: 15 px;
marge inférieure: 40 px;
marge gauche: 70 pixels;
} Ici, "div" est un sélecteur qui spécifie que ce style doit être appliqué à tous les div du code du document. La syntaxe CSS vous permet de combiner les quatre lignes en une seule: div {
marge: 10px 15px 40px 70px;
} Les valeurs des retraits doivent toujours être spécifiées dans cet ordre: d'abord - en haut, puis - à droite, en bas et à gauche. Si les retraits sont les mêmes de tous les côtés, alors il suffit de spécifier la valeur une fois: div {
marge: 70 pixels;
} De plus, vous pouvez définir une marge horizontale flottante (c'est-à-dire gauche et droite). Cela peut être très utile lorsque vous devez définir un bloc d'une largeur donnée exactement au centre de la fenêtre du navigateur. Le navigateur lui-même détermine automatiquement le degré d'indentation des deux côtés, si vous écrivez l'instruction CSS suivante: div {
marge: 0 automatique;
}
Étape 3
Utilisez la propriété padding pour définir le remplissage, qui est la distance entre la bordure d'un élément et tous les éléments placés à l'intérieur, y compris le texte. La syntaxe de cette propriété est exactement la même que pour la propriété margin: div {
rembourrage haut: 10px;
remplissage-droit: 15px;
rembourrage en bas: 40px;
remplissage-gauche: 70px;
} Ou div {
rembourrage: 10px 15px 40px 70px;
}
Étape 4
Utilisez la propriété text-indent pour définir le retrait supplémentaire pour la première ligne de chaque paragraphe de texte. Par exemple: div {
retrait de texte: 80px;
}
Étape 5
Utilisez les attributs hspace et vspace de la balise HTML img pour définir l'indentation horizontale et verticale de l'image aux éléments externes, respectivement. Par exemple, comme ceci:
Étape 6
Utilisez l'attribut cellpadding de la balise table si vous devez définir l'indentation entre les bordures des cellules du tableau et leur contenu. Et l'attribut cellspacing définit l'espacement entre les cellules du tableau. Par example:
| 1 | 2 |
