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="/physics-questions/">Preguntas-Fisica</a> </li><li> <a href="/cyber-security-tutorial/">Tutorial De Seguridad Cibernética</a> </li><li> <a href="/bash-script/">Bash-Script</a> </li><li> <a href="/english-questions/">Preguntas De Ingles</a> </li><li> <a href="/ethical-hacking/">Hackeo Ético</a> </li><li> <a href="/counting-sort/">Ordenar-Contar</a> </li><li> <a href="/technical-scripter-2022-cat/">Guionista Técnico 2022</a> </li><li> <a href="/bfs/">Bfs</a> </li><li> <a href="/chemistry/">Química</a> </li><li> <a href="/javascript-operators/">Operadores-Javascript</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Imprimir un valor entero en C</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal de informática para geeks. Contiene artículos de programación y ciencias de la computación bien escritos, bien pensados y bien explicados, cuestionarios y preguntas de práctica/programación competitiva/entrevistas de empresa.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/print-an-integer-value-c"> <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="/getter-setter-method-java-example">Ejemplo de método Getter y Setter en Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-timestamp-class">Clase de marca de tiempo de Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-jbl">¿Cuál es la forma completa de JBL?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/node-js-fs-writefilesync-method">Método Node.js fs.writeFileSync()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/mysql-delete-cascade">MySQL AL ELIMINAR CASCADA</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="/how-find-array-length-java">java len de matriz</a>
</li><li><a href="/java-drivermanager-getconnection-method">obtener conexión</a>
</li><li><a href="/java-break-statement">java sale del bucle</a>
</li><li><a href="/python-modulus-operator">operador restante de Python</a>
</li><li><a href="/gamepigeon-android">Cómo conseguir una paloma de caza en Android.</a>
</li><li><a href="/how-track-iphone-from-an-android-phone">encontrar mi iphone desde android</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>
</body>
</html>