En este artículo, aprenderemos cómo agregar espacios/tabulaciones en el texto usando HTML y CSS . Como sabemos, HTML no admite más de un espacio de forma predeterminada, es por eso que necesitamos algunos atributos adicionales o CSS para obtener espacio adicional entre el texto.
Estos son los siguientes enfoques; al utilizarlos, podemos agregar espacios/tabulaciones en el texto:
Tabla de contenidos
Usando las entidades HTML
- El La entidad de carácter se utiliza para indicar un espacio que no se separa y que es un espacio fijo. Esto puede percibirse como el doble de espacio de un espacio normal. Se utiliza para crear un espacio en una línea que no se puede dividir mediante ajuste de palabras.
- El La entidad de carácter se utiliza para indicar un espacio 'en', lo que significa un tamaño de medio punto de la fuente actual. Esto puede percibirse como el doble de espacio de un espacio normal.
- El La entidad de carácter se utiliza para indicar 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: En este ejemplo, veremos cómo usar espacios y no olvide agregar, y &emsp en el código donde necesita agregar espacio entre el texto.
HTML ¿Cómo insertar espacios/tabulaciones en texto usando HTML/CSS? título> cabeza> <body> <h1 style='color: green'>Portaltecnico.proh1> <b>¿Cómo insertar espacios/tabulaciones en texto usando HTML/CSS?b><p>Este es un espacio normal.p><p>Este es un espacio de dos espacios.p><p>Este es un espacio de cuatro espacios.p> cuerpo> html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/merge-sort-algorithm">ordenación fusionada</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="entidades-características"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>Usando la propiedad de tamaño de pestaña en CSS</strong> </b> </h2><p dir='ltr'><span>El</span> <span>propiedad de tamaño de pestaña en CSS</span> <span>se utiliza para establecer el número de espacios que se mostrarán en 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 sólo funciona con texto preformateado (usando</span></p><pre class='hljs'> tags). The tab character can be inserted by holding the Alt and pressing 0 and 9 together. Syntax .tab { tab-size: value; /* for e.g: value = 2*/ } Example: In this example, we are going to implement the above-explained method. html <html> <head> <title>¿Cómo insertar espacios/tabulaciones en texto usando HTML/CSS? título><style>.tab1 { tamaño de pestaña: 2; } .tab2 { tamaño de pestaña: 4; } .tab4 { tamaño de pestaña: 8; } estilo> cabeza> <body> <h1 style='color: green'>Portaltecnico.proh1> <b>¿Cómo insertar espacios/tabulaciones en texto usando HTML/CSS?b><pre class='hljs'zalupa>Esta es una pestaña con 2 espacios.pre><pre class='hljs'zalupa>Esta es una pestaña con 4 espacios.pre><pre class='hljs'zalupa>Esta es una pestaña con 8 espacios.pre> cuerpo> html> Salida: usando CSS personalizado Se puede crear una nueva clase que proporcione una cierta cantidad de espacio usando la propiedad de margen izquierdo. 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; margen izquierdo: valor; /* por ejemplo: valor = 40px*/ } Ejemplo: en este ejemplo, implementaremos el método explicado anteriormente. HTML<html> <head> <title>¿Cómo insertar espacios/tabulaciones en texto usando HTML/CSS? título><style>.tab { mostrar: bloque en línea; margen izquierdo: 40px; } estilo> cabeza> <body> <h1 style='color: green'>Portaltecnico.proh1> <b>¿Cómo insertar espacios/tabulaciones en texto usando HTML/CSS?b><p>Esto es un<span>span>espacio de tabulación en el documento.p> cuerpo> html> Salida:></pre></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/linux-files/">Archivos De Linux</a> </li><li> <a href="/privacy-policy/">Política De Privacidad</a> </li><li> <a href="/disclaimer/">Descargo De Responsabilidad</a> </li><li> <a href="/parents/">Padres</a> </li><li> <a href="/classroom-resources/">Recursos Para El Aula</a> </li><li> <a href="/cpp-examples/">Ejemplos De Cpp</a> </li><li> <a href="/cpp-iterator/">Iterador Cpp</a> </li><li> <a href="/terms-of-use/">Condiciones De Uso</a> </li><li> <a href="/java-instant-class/">Clase Instantánea De Java</a> </li><li> <a href="/splunk-tutorial/">Tutorial De Spunk</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Cómo hacer naranja en 2 sencillos pasos</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> ¿Qué dos colores forman el naranja? Te explicamos cómo hacer naranja y encontrar el tono o matiz exacto que necesitas.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/how-make-orange-2-easy-steps-131206"> <i class="fa fa-external-link"></i> Leer Más</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Artículos De Interés</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/how-align-image-html">Cómo alinear una imagen en HTML</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/is-ap-statistics-hard-131738">¿Son difíciles las estadísticas AP? Una discusión de expertos</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/spring-boot-tutorial">Tutorial de arranque de primavera</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/array-pointers-c">Matriz de punteros en C</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-do-you-say-thank-you-german-131688">¿Cómo se dice gracias en alemán? 12 frases útiles</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Entradas Populares</h2>
<div class="content">
<ul class="list"> <li><a href="/binary-search-algorithm">búsqueda binaria</a>
</li><li><a href="/hadoop-tutorial">tutorial de hadoop</a>
</li><li><a href="/java-custom-exception">excepción personalizada en java</a>
</li><li><a href="/bash-else-if">si no, si bash</a>
</li><li><a href="/java-convert-string-int">cómo convertir de cadena a int</a>
</li><li><a href="/how-remove-first-character-excel">cómo eliminar el primer carácter en excel</a>
</li><li><a href="/rename-folder-linux">cambiar el nombre de una carpeta Linux</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Todos Los Derechos Reservados | <a href="//sk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>