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="//brunetteerdeplete.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="/linux-files/">Archivos De Linux</a> </li><li> <a href="/java-basics/">Conceptos Básicos De Java</a> </li><li> <a href="/free-games/">Juegos Gratuitos</a> </li><li> <a href="/verilog-tutorial/">Tutorial De Verilog</a> </li><li> <a href="/python-file-handling-programs/">Programas De Manejo De Archivos Python</a> </li><li> <a href="/searching/">Búsqueda</a> </li><li> <a href="/dbms-join/">Unirse A Dbms</a> </li><li> <a href="/r-machine-learning/">R Aprendizaje Automático</a> </li><li> <a href="/it-problems-solutions/">Problemas Y Soluciones De Ti</a> </li><li> <a href="/cpp-strings-library/">Biblioteca-Cadenas-Cpp</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="//brunetteerdeplete.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">¿Qué significa 'Veni Vidi Vici'? ¿Por qué la gente lo dice?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> ¿Tienes curiosidad por la historia y el significado de veni, vidi, vici? Descubra quién acuñó esta famosa frase latina y cómo llegó a ser tan conocida.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-doesveni-vidi-vicimean-13164"> <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="/type-function-python">función tipo() en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/full-expert-analysis-131438">Análisis completo de expertos: 'No entres amablemente en esa buena noche' por Dylan Thomas</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/convert-cubic-meter-liter">Convertir Metro Cúbico A Litro (m³ a l)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/classes-objects-java">Clases y objetos en Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/nslookup-command-linux-with-examples">Comando Nslookup en Linux con ejemplos</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="/java-regex">expresión regular java $</a>
</li><li><a href="/c-strings">cadena en c</a>
</li><li><a href="/jpa-vs-hibernate">jpa vs hibernación</a>
</li><li><a href="/java-stream-filter">flujo de filtro java</a>
</li><li><a href="/how-download-youtube-video-vlc-media-player">como descargar videos de youtube vlc</a>
</li><li><a href="/data-types-java">tipos de datos primitivos en java</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="//lt.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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>