Créer de l’espace supplémentaire dans votre HTML sur une page Web peut être réalisé de plusieurs façons selon le type d’espace que vous voulez créer. Les sections suivantes contiennent plusieurs des différentes façons de créer de l’espace supplémentaire en utilisant HTML et CSS.
- Créer des espaces supplémentaires avant ou après le texte.
- Maintenez l’espacement dans le texte qui est collé dans une page.
- Créer un espace supplémentaire autour d’un élément ou d’un objet.
- Création d’un onglet en utilisant CSS et HTML.
- Ajoutez de l’espace sous une ligne ou un paragraphe de texte.
Créer des espaces supplémentaires avant ou après le texte
Une des choses les plus déroutantes pour les nouveaux utilisateurs qui créent leur propre page Web est qu’ils ne peuvent pas appuyer plusieurs fois sur la barre d’espacement pour créer des espaces supplémentaires. Pour créer des espaces supplémentaires avant, après ou entre votre texte, utilisez le caractère HTML étendu (espace insécable).
Par exemple, avec « extra space » nous avons le code suivant dans notre HTML.
Si vous utilisez un éditeur WYSIWYG pour entrer le code ci-dessus, vous devez être dans l’onglet HTML ou modifier le code HTML.
- Liste complète des caractères HTML spéciaux étendus.
Maintenir l’espacement dans le texte qui est collé dans une page
Si vous collez du texte avec des espaces ou des tabulations supplémentaires, vous pouvez utiliser la balise HTML pour conserver le texte formaté. Vous trouverez ci-dessous un exemple de la façon de coller du texte avec des espaces supplémentaires à l’aide de l’option
L’exemple ci-dessus est réalisé en utilisant le code HTML ci-dessous.
Si vous utilisez un éditeur WYSIWYG pour entrer le code ci-dessus, vous devez être dans l’onglet HTML ou modifier le code HTML.
- Voir notre page de balises HTML pour plus d’informations sur cette balise.
Créer de l’espace supplémentaire autour d’un élément ou d’un objet
Tout élément HTML peut avoir des espaces supplémentaires en haut, à droite, en bas ou à gauche. Cependant, il est important que vous compreniez la différence entre la marge et le rembourrage avant de décider quel type d’espace vous voulez ajouter autour de l’élément ou d’un autre objet. Comme vous pouvez le voir sur l’image ci-dessous, le rembourrage est ce qui entoure immédiatement l’élément, à l’intérieur de la bordure, et la marge à l’extérieur de la bordure.
Dans l’exemple ci-dessous, notre paragraphe est entouré d’une bordure, en retrait avec une marge, et a de l’espace à droite et en bas du paragraphe.
Exemple d’un paragraphe avec marge et remplissage.
L’exemple ci-dessus a été créé en utilisant le code ci-dessous.
Exemple d’un paragraphe avec marge et remplissage.
Dans la première section du code, « margin-left : 2.5em; » ajoute une marge gauche de 2.5 em, qui donne l’apparence de texte en retrait. Comme le montre l’exemple, cet espacement se situe à l’extérieur de la bordure. Dans la section suivante, « rembourrage » : 0 7em 2em 2em 0; » définit le rembourrage supérieur, droit, inférieur et gauche (sens horaire). Il y a « 0 » rembourrage supérieur, « 7em » rembourrage droit, « 2em » rembourrage inférieur, et 0 rembourrage gauche. Le reste de cet exemple définit à quoi doit ressembler la bordure.
Création d’un onglet en utilisant CSS et HTML
Un onglet peut être créé en HTML en ajustant la marge gauche d’un élément. Par exemple, ce paragraphe a une marge gauche de 2,5 em par rapport à l’élément contenant le texte. Le CSS pour créer cette marge de gauche est montré ci-dessous.
Après avoir placé ce code dans notre fichier CSS, nous pouvons appliquer la classe « tab » à n’importe quel texte pour créer l’apparence d’un onglet. La valeur de la marge gauche peut être augmentée ou diminuée selon vos besoins.
Bien que nous recommandions la méthode ci-dessus, le CSS marge-gauche peut également être ajouté en ligne comme indiqué dans l’exemple ci-dessous.
Un exemple d’une marge gauche de 5em.
Un exemple d’une marge gauche de 5em.
- Comment mettre en retrait ou tabuler du texte sur ma page Web ou en HTML?
Ajouter de l’espace sous une ligne ou un paragraphe de texte
Si vous avez besoin d’ajouter de l’espace supplémentaire sous une ligne ou un paragraphe de texte, et que vous n’avez besoin de le faire qu’une seule fois, vous pouvez utiliser la commande
pour ajouter de l’espace supplémentaire dans un document. Voici un exemple d’application de cette technique.
Cette phrase contient un exemple de texte.
Comme vous pouvez le voir, deux pauses ont été ajoutées pour créer l’espace ci-dessus.
Le code ci-dessus créerait le texte illustré ci-dessous.
Cette phrase contient un exemple de texte.
Comme vous pouvez le voir, deux pauses ont été ajoutées pour créer l’espace ci-dessus.
Des pauses supplémentaires peuvent être ajoutées au besoin. Cependant, nous vous suggérons d’utiliser la méthode CSS mentionnée plus haut pour ajouter du remplissage et de l’espacement autour de votre texte si cela se fait à plusieurs endroits sur une page.