Cómo insertar espacios / pestañas en el texto usando HTML / CSS

Posibles formas:

<pre> ... </pre>

o

style="white-space:pre"

¿Algo más?

Para insertar tab spaceentre dos palabras / oraciones, generalmente uso

  y  

En los casos en que el ancho / alto del espacio está más allá  , generalmente uso:

Para espaciador horizontal:

<span style="display:inline-block; width: YOURWIDTH;"></span>

Para espaciador vertical:

<span style="display:block; height: YOURHEIGHT;"></span>

Puede usar  para espacios, <para <(menor que, número de entidad <) y >para >(mayor que, número de entidad >).

Se puede encontrar una lista completa en Entidades HTML .

Tratar  .

Según la documentación en Caracteres especiales :

Las entidades de caracteres  y  denotan un espacio en y un espacio em respectivamente, donde un espacio en es la mitad del tamaño en puntos y un espacio en em es igual al tamaño en puntos de la fuente actual. Para las fuentes de paso fijo, el agente de usuario puede tratar el espacio en blanco como equivalente a un carácter de espacio A, y el espacio em como equivalente a dos caracteres de espacio.

Me gusta usar esto:

En tu CSS:

.tab { 
       display:inline-block; 
       margin-left: 40px; 
}

En tu HTML:

<p>Some Text <span class="tab">Tabbed Text</span></p>

Tipos de Spacesen HTML

Crea cuatro espacios entre el texto  

Crea dos espacios entre el texto:  

Crea un espacio regular entre el texto:  

crea un espacio estrecho (similar al espacio regular pero con una ligera diferencia - "&thinsp";

espaciado entre oraciones - "</br>"

Este enlace puede ayudarte. Echa un vistazo a [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

La primera línea de este párrafo tendrá una sangría de aproximadamente cinco caracteres, similar a una sangría con pestañas.

Consulte Cómo usar HTML y CSS para crear pestañas y espaciado para obtener más información.

<span style="padding-left:68px;"></span>

También puedes usar:

padding-left
padding-right
padding-top
padding-bottom

Vaya un paso más allá de @Ivar y diseñe mi propia etiqueta personalizada de esta manera ... Para mí, 'pestaña' es más fácil de recordar y escribir.

tab {
    display: inline-block;
    margin-left: 40px;
}

Y la implementación de HTML ...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

Y mi captura de pantalla ...

Si está pidiendo pestañas para alinear cosas en algunas líneas, puede usarlas <table>.

Poniendo cada línea adentro <tr> ... </tr>. Y cada elemento dentro de esa línea adentro <td> ... </td>. Y, por supuesto, siempre puede controlar el relleno de cada celda de la tabla para ajustar el espacio entre ellas.

Esto los alineará y se verán bastante bien :)

Alternativamente denominado espacio fijo o espacio duro, el espacio sin interrupción (NBSP) se utiliza en la programación y el procesamiento de textos para crear un espacio en una línea que no se puede dividir mediante el ajuste de palabras.

Con HTML, le  permite crear múltiples espacios visibles en una página web y no solo en el código fuente.

Espacio en blanco? ¿No podrías simplemente usar relleno? Esa es una idea. Así es como puede agregar alguna "área en blanco" alrededor de su elemento. Entonces puede usar las siguientes etiquetas CSS:

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

Puede usar este código  para agregar un espacio en el contenido HTML. Para el espacio de tabulación, úselo 5 veces o más.

Vea un ejemplo aquí: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

Utiliza el CSS estándar tab-size.

Para insertar un símbolo de tabulación (si es una tecla de tabulación estándar, mover el cursor) presione Alt+ 0+ 0+9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

Mi preferido:

*{-moz-tab-size: 1; tab-size: 1;}

Mire el fragmento o el ejemplo de búsqueda rápida en tamaño de pestaña .

.t1{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}

<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>

Esto funcionó para mí:

En mi CSS tengo:

tab0  { position:absolute;left:25px;  }
tab1  { position:absolute;left:50px;  }
tab2  { position:absolute;left:75px;  }
tab3  { position:absolute;left:100px; }
tab4  { position:absolute;left:125px; }
tab5  { position:absolute;left:150px; }
tab6  { position:absolute;left:175px; }
tab7  { position:absolute;left:200px; }
tab8  { position:absolute;left:225px; }
tab9  { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }

Luego, en el HTML, solo uso mis pestañas:

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75

La respuesta de user8657661 está más cerca de mis necesidades (de alinear las cosas en varias líneas). Sin embargo, no pude hacer que el código de ejemplo funcionara según lo provisto, pero necesitaba cambiarlo de la siguiente manera:

<html>
    <head>
        <style>
            .tab9 {position:absolute;left:150px; }
        </style>
    </head>

    <body>
        Dog Food: <span class="tab9"> $30</span><br/>
        Milk of Magnesia:<span class="tab9"> $30</span><br/>
        Pizza Kit:<span class="tab9"> $5</span><br/>
        Mt Dew <span class="tab9"> $1.75</span><br/>
    </body>
</html>

Si necesita cifras en columna derecha se puede cambiar left:150pxa right:150px, pero tendrá que modificar el número en función del ancho de la pantalla (como está escrito el número sería 150 píxeles desde el borde derecho de la pantalla).

Puede hacerlo a través del relleno <span style="padding-left: 20px;">, puede verificar más formas aquí en - espacio en blanco en html

Aquí hay un texto "Tabulador" (copiar y pegar): ""

Puede parecer diferente o no una pestaña completa debido a las limitaciones de respuesta de este sitio.