La création d'espace supplémentaire dans votre code HTML sur une page Web peut être réalisée de plusieurs manières en fonction du type d'espace que vous souhaitez créer. Les sections suivantes contiennent de nombreuses façons différentes de créer de l'espace supplémentaire à l'aide de HTML et de CSS.

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’espace pour créer des espaces supplémentaires. Pour créer des espaces supplémentaires avant, après ou entre votre texte, utilisez la commande (espace insécable) caractère HTML étendu.

Par exemple, avec "espace supplémentaire", nous avons le code suivant dans notre code HTML.

 espace supplémentaire 

Remarque: Si vous utilisez un éditeur WYSIWYG pour entrer le code ci-dessus, vous devez être dans l'onglet HTML ou éditer le code HTML.

• Liste complète des caractères HTML spéciaux étendus.

Garder l'espacement dans le texte collé dans une page

Si vous collez du texte avec des espaces ou des tabulations supplémentaires, vous pouvez utiliser le code HTML.

 balise pour garder le texte mis en forme. Vous trouverez ci-dessous un exemple montrant comment coller du texte avec des espaces supplémentaires à l’aide de la touche 
 étiquette.
 Ce texte a beaucoup d'espaces 
L'exemple ci-dessus est fait en utilisant le code HTML ci-dessous.
 Ce texte a beaucoup d'espaces 
Remarque: Si vous utilisez un éditeur WYSIWYG pour entrer le code ci-dessus, vous devez être dans l'onglet HTML ou éditer le code HTML.
Voir notre HTML 
 page de balise pour plus d'informations sur cette balise.
Création d'espace supplémentaire autour d'un élément ou d'un objet 
Tout élément HTML peut avoir un espacement supplémentaire ajouté en haut, à droite, en bas ou à gauche. Cependant, il est important que vous compreniez la différence entre la marge et le remplissage avant de décider du type d'espace à ajouter autour de l'élément ou d'un autre objet. Comme vous pouvez le voir sur l'image ci-dessous, le remplissage 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, avec une marge, et dispose d'un espace à droite et au bas du paragraphe.
Un exemple de paragraphe avec marge et padding.
L'exemple ci-dessus a été créé à l'aide du code ci-dessous.
Exemple de paragraphe avec marge et padding.
Dans la première partie du code, "margin-left: 2.5em;" ajoute une marge gauche de 2, 5 em, ce qui donne l'apparence d'un texte en retrait. Comme le montre l'exemple, cet espacement est en dehors de la frontière. Dans la section suivante, "padding: 0 7em 2em 0;" définit le remplissage en haut, à droite, en bas et à gauche (dans le sens des aiguilles d'une montre). Il existe un remplissage supérieur "0", un remplissage droit "7em", un remplissage inférieur "2em" et un remplissage gauche. Le reste de cet exemple définit l'apparence de la bordure.
Créer 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 de l’élément contenant le texte. Le CSS pour créer cette marge de gauche est présenté ci-dessous.
 .tab {margin-left: 2.5em} 
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 tab. La valeur de la marge gauche peut être augmentée ou réduite en fonction de 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 de 5em marge gauche.
Un exemple de 5em marge gauche.
Comment puis-je mettre en retrait ou utiliser un onglet sur ma page Web ou en HTML?
Si vous devez ajouter un espace supplémentaire sous une ligne ou un paragraphe de texte et ne devez le faire qu’une seule fois, vous pouvez utiliser la commande
balise pour ajouter de l’espace supplémentaire dans un document. Vous trouverez ci-dessous un exemple d'application de cette technique.
Cette phrase contient un exemple de texte.
Comme vous pouvez le constater, deux pauses ont été ajoutées pour créer l’espace ci-dessus.
Le code ci-dessus créerait le texte ci-dessous.
Cette phrase contient un exemple de texte.
Comme vous pouvez le constater, deux pauses ont été ajoutées pour créer l’espace ci-dessus.
Des pauses supplémentaires peuvent être ajoutées si nécessaire. Cependant, nous vous suggérons d'utiliser la méthode CSS mentionnée plus haut pour ajouter du remplissage et de l'espacement autour du texte si cette opération est effectuée à plusieurs endroits sur une page.