La façon dont les navigateurs gèrent les espaces blancs n'est pas très intuitive au début, surtout si vous comparez la façon dont Hypertext Markup Language gère les espaces blancs par rapport aux programmes de traitement de texte. Dans un logiciel de traitement de texte, vous pouvez ajouter beaucoup d'espacement ou de tabulations dans le document et cet espacement sera reflété dans l'affichage du contenu du document. Cette conception WYSIWYG n'est pas le cas avec HTML ou avec des pages Web.
Espacement à l'impression
Dans les logiciels de traitement de texte, les trois principaux caractères blancs sont les espace, languette, et retour chariot. Chacun de ces caractères agit de manière distincte, mais en HTML, les navigateurs les rendent tous essentiellement identiques. Que vous placiez un espace ou 100 espaces dans votre balisage HTML ou mélanger votre espacement avec des tabulations et des retours chariot, tous ces éléments seront condensés à un seul espace lorsque la page est rendue par le
le navigateur. Dans la terminologie de la conception Web, cela s'appelle effondrement de l'espace blanc. Vous ne pouvez pas utiliser ces touches d'espacement typiques pour ajouter des espaces dans une page Web, car le navigateur réduit les espaces répétés en un seul espace lorsqu'il est affiché dans le navigateur,Utilisation de CSS pour créer des onglets HTML et un espacement
Les sites Web d'aujourd'hui sont construits avec une séparation de la structure et du style. La structure d'une page est gérée par HTML tandis que le style est dicté par des feuilles de style en cascade. Pour créer un espacement ou obtenir une certaine mise en page, utilisez CSS au lieu d'ajouter des caractères d'espacement au code HTML.
Si vous essayez d'utiliser onglets pour créer des colonnes de texte, utilisez plutôt
Si les données que vous présentez sont des données tabulaires, utilisez des tableaux pour aligner ces données comme vous le souhaitez. Les tableaux ont souvent mauvaise réputation dans la conception de sites Web, car ils ont été maltraités en tant qu'outils de mise en page purs pendant tant d'années, mais les tableaux sont toujours parfaitement valides si votre contenu contient de véritables données tabulaires.
Marges, remplissage et retrait de texte
Les méthodes les plus courantes pour créer un espacement avec CSS consistent à utiliser l'un des styles CSS suivants:
- marge
- rembourrage
- retrait du texte
Par exemple, indentez la première ligne d'un paragraphe comme un onglet avec le CSS suivant (notez que cela suppose que votre paragraphe a un attribut de classe "first" attaché):
p.premier {
retrait de texte: 5em ;
}
Ce paragraphe met en retrait environ cinq caractères.
Utilisez les propriétés de marge ou de remplissage dans CSS pour ajouter un espacement en haut, en bas, à gauche ou à droite (ou des combinaisons de ces côtés) d'un élément. Obtenez tout type d'espacement nécessaire en vous tournant vers CSS.
Déplacer du texte plus d'un espace sans CSS
Si tout ce que vous voulez, c'est que votre texte soit éloigné de plus d'un espace de l'élément précédent, utilisez l'espace insécable.
Pour utiliser l'espace insécable, vous ajoutez autant de fois que vous en avez besoin dans votre balisage HTML.
HTML respecte ces espaces insécables et ne les réduira pas à un seul espace. Cependant, cette approche est considérée comme une mauvaise pratique car elle ajoute un balisage HTML supplémentaire à un document uniquement pour répondre aux besoins de mise en page. Dans la mesure du possible, évitez d'ajouter des espaces insécables simplement pour obtenir l'effet de mise en page souhaité et utilisez Marges CSS et remplissage plutôt.