El espaciado se puede agregar usando HTML y CSS mediante 3 enfoques:
Método 1: usar los caracteres especiales designados para diferentes espacios
El entidad de carácter utilizada para denotar un espacio de no separación que es un espacio fijo. Esto puede percibirse como el doble del espacio de un espacio normal. Se utiliza para crear un espacio en una línea que no se puede romper con el ajuste de línea.
El entidad de carácter utilizada para denotar un espacio ‘en’ que significa tamaño de medio punto de la fuente actual. Esto puede percibirse como el doble del espacio de un espacio normal.
El entidad de carácter utilizada para denotar un espacio ‘em’ que significa igual al tamaño en puntos de la fuente actual. Esto puede percibirse como cuatro veces el espacio de un espacio normal.
Sintaxis:
Regular space: Two spaces gap:   Four spaces gap:  
Ejemplo:
<!DOCTYPE html> <html> <head> <title> How to insert spaces/tabs in text using HTML/CSS? </title> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <b>How to insert spaces/tabs in text using HTML/CSS?</b> <p>This is a regular space.</p> <p>This is a two spaces gap.</p> <p>This is a four spaces gap.</p> </body> </html>
En el código anterior, el espacio regular y el código de dos espacios y cuatro espacios no están visibles, así que así es como se ve
Output:
Método 2: usar la propiedad de tamaño de tabulación para establecer el espaciado de los caracteres de tabulación
La propiedad CSS de tamaño de tabulación se establece en el número de espacios que mostrará cada carácter de tabulación. Cambiar este valor permite insertar la cantidad necesaria de espacio en un carácter de tabulación. Sin embargo, este método solo funciona con texto preformateado (usando etiquetas <pre>).
El carácter de tabulación se puede insertar manteniendo presionada la tecla Alt y presionando 0 y 9 al mismo tiempo.
Sintaxis:
.tab {
tab-size: 2;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to insert spaces/tabs in text using HTML/CSS?
</title>
<style>
.tab1 {
tab-size: 2;
}
.tab2 {
tab-size: 4;
}
.tab4 {
tab-size: 8;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>How to insert spaces/tabs in text using HTML/CSS?</b>
<pre class="tab1">This is a tab with 2 spaces.</pre>
<pre class="tab2">This is a tab with 4 spaces.</pre>
<pre class="tab4">This is a tab with 8 spaces.</pre>
</body>
</html>
Producción:
Método 3: Crear una nueva clase para espaciado usando CSS
Se puede crear una nueva clase que proporcione una cierta cantidad de espacio utilizando la propiedad margin-left. La cantidad de espacio podría estar dada por la cantidad de píxeles especificados en esta propiedad.
La propiedad de visualización también se establece en ‘bloque en línea’ para que no se agregue ningún salto de línea después del elemento. Esto permite que el espacio se asiente junto al texto y otros elementos.
Sintaxis:
.tab {
display: inline-block;
margin-left: 40px;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to insert spaces/tabs in text using HTML/CSS?
</title>
<style>
.tab {
display: inline-block;
margin-left: 40px;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<b>How to insert spaces/tabs in text using HTML/CSS?</b>
<p>This is a<span class="tab"></span>tab space in the document.</p>
</body>
</html>
Producción:
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA