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><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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="/blog/">Blog</a> </li><li> <a href="/excel/">Sobresalir</a> </li><li> <a href="/software-testing/">Pruebas De Software</a> </li><li> <a href="/google-docs/">Documentos De Google</a> </li><li> <a href="/intellij-idea-tutorial/">Tutorial De Intellij Idea</a> </li><li> <a href="/sorting/">Clasificación</a> </li><li> <a href="/design-pattern/">Patrón De Diseño</a> </li><li> <a href="/java-strings/">Cadenas Java</a> </li><li> <a href="/java-serialization/">Serialización De Java</a> </li><li> <a href="/python-numpy-arraymanipulation/">Manipulación De Matrices Numpy De Python</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">GBM en el aprendizaje automático</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> GBM en aprendizaje automático con tutorial, introducción al aprendizaje automático, qué es el aprendizaje automático, aprendizaje automático de datos, aprendizaje automático frente a inteligencia artificial, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/gbm-machine-learning"> <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="/data-abstraction-and-data-independence">Abstracción de datos e independencia de datos</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-50-java-project-ideas">Las 50 mejores ideas de proyectos Java para principiantes y avanzados</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-double/">Java-Doble</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-application-software">¿Qué es el software de aplicación?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/complete-list-colleges-with-no-application-fee-131698">Lista completa: universidades sin tarifa de solicitud (actualizada)</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="/what-is-10-ml-ounces">10 ml es cuanto</a>
</li><li><a href="/fizzbuzz-program-java">java</a>
</li><li><a href="/mamta-kulkarni">mamita kulkarni</a>
</li><li><a href="/history-java">historia en java</a>
</li><li><a href="/rakul-preet-singh">Actriz Rakul Preet Singh</a>
</li><li><a href="/how-block-youtube-ads-android">bloquear anuncios de youtube en android</a>
</li><li><a href="/java-convert-string-int">cuerda para ello</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="//es.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>