Cómo insertar espacios/tabulaciones en texto usando HTML y CSS
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> <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> 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> <prezalupa>Esta es una pestaña con 2 espacios.pre> <prezalupa>Esta es una pestaña con 4 espacios.pre> <prezalupa>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>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Compartir </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Cómo insertar espacios/tabulaciones en texto usando HTML y CSS&url=https://www.techcodeview.com/es/how-insert-spaces-tabs-text-using-html"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/es/how-insert-spaces-tabs-text-using-html"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/es/how-insert-spaces-tabs-text-using-html&title=Cómo insertar espacios/tabulaciones en texto usando HTML y CSS"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Te Puede Gustar </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/es/how-remove-first-character-excel" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/ms-excel-tutorial/94/how-remove-first-character-excel.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo eliminar el primer carácter en Excel" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/es/how-remove-first-character-excel">Cómo eliminar el primer carácter en Excel </a>
</h4>
</div> <div class="group">
<a href="/es/function-pointer-c" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/cpp-pointer/20/function-pointer-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Puntero de función en C++" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/es/function-pointer-c">Puntero de función en C++ </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Artículos Más Populares </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/support-vector-machine-algorithm">
<img src="https://techcodeview.com/img/python/62/support-vector-machine-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Algoritmo de máquina de vectores de soporte (SVM)" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/support-vector-machine-algorithm" class="hover:text-tech-500 transition-colors line-clamp-3">Algoritmo de máquina de vectores de soporte (SVM) </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/inline-block-elements">
<img src="https://techcodeview.com/img/blog/83/inline-block-elements.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Elementos de bloque en línea" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/inline-block-elements" class="hover:text-tech-500 transition-colors line-clamp-3">Elementos de bloque en línea </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/jdk-java">
<img src="https://techcodeview.com/img/it-problems-solutions/72/jdk-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="JDK en Java" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/jdk-java" class="hover:text-tech-500 transition-colors line-clamp-3">JDK en Java </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/how-find-an-angle-right-angled-triangle">
<img src="https://techcodeview.com/img/maths-calculators/87/how-find-an-angle-right-angled-triangle.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Cómo encontrar un ángulo en un triángulo rectángulo?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/how-find-an-angle-right-angled-triangle" class="hover:text-tech-500 transition-colors line-clamp-3">¿Cómo encontrar un ángulo en un triángulo rectángulo? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/how-fix-horizontal-lines-computer-screen">
<img src="https://techcodeview.com/img/pc-tips/44/how-fix-horizontal-lines-computer-screen.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Cómo arreglar líneas horizontales en la pantalla de una computadora?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/how-fix-horizontal-lines-computer-screen" class="hover:text-tech-500 transition-colors line-clamp-3">¿Cómo arreglar líneas horizontales en la pantalla de una computadora? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/how-compare-files-line-line-linux-diff-command">
<img src="https://techcodeview.com/img/linux-command/73/how-compare-files-line-line-linux-diff-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Cómo comparar archivos línea por línea en Linux | Comando diferencia" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/how-compare-files-line-line-linux-diff-command" class="hover:text-tech-500 transition-colors line-clamp-3">Cómo comparar archivos línea por línea en Linux | Comando diferencia </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/uml-use-case-diagram">
<img src="https://techcodeview.com/img/uml-tutorial/11/uml-use-case-diagram.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Diagrama de casos de uso de UML" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/uml-use-case-diagram" class="hover:text-tech-500 transition-colors line-clamp-3">Diagrama de casos de uso de UML </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/linux-uniq-command">
<img src="https://techcodeview.com/img/linux-filters/98/linux-uniq-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comando único de Linux" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/linux-uniq-command" class="hover:text-tech-500 transition-colors line-clamp-3">Comando único de Linux </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/how-many-zeros-1-million">
<img src="https://techcodeview.com/img/maths/58/how-many-zeros-1-million.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="cuantos ceros hay en 1 millon" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/how-many-zeros-1-million" class="hover:text-tech-500 transition-colors line-clamp-3">cuantos ceros hay en 1 millon </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/es/does-your-major-affect-your-acceptance-into-college-1311544">
<img src="https://techcodeview.com/img/blog/92/does-your-major-affect-your-acceptance-into-college.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Tu especialidad afecta tu aceptación en la universidad?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/es/does-your-major-affect-your-acceptance-into-college-1311544" class="hover:text-tech-500 transition-colors line-clamp-3">¿Tu especialidad afecta tu aceptación en la universidad? </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Categoría </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/es/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/es/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Conversión De Java
</a> <a href="/es/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Matemáticas
</a> <a href="/es/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Colecciones Java
</a> <a href="/es/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Diferencias
</a> <a href="/es/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Cadena De Java
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Artículos De Interés </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/maths-class-12/79/domain-range-function.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Dominio y rango de una función" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/maths-class-12-cat/">Matemáticas-Clase-12 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/domain-range-function">Dominio y rango de una función </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/mysql-tutorial/55/mysql-regexp_replace-function.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Función MySQL REGEXP_REPLACE()" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/mysql-tutorial/">Tutorial De Mysql </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/mysql-regexp_replace-function">Función MySQL REGEXP_REPLACE() </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/computer/32/what-is-ring-topology.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Qué es una topología de anillo?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/computer/">Computadora </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/what-is-ring-topology">¿Qué es una topología de anillo? </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/33/how-long-is-act-act-expert-guide.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Cuánto dura el ACT? | Guía experta de ACT" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/how-long-is-act-act-expert-guide-131234">¿Cuánto dura el ACT? | Guía experta de ACT </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/python-os-module/80/executing-shell-commands-with-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ejecutar comandos de Shell con Python" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/python-os-module/">Módulo-Os-Python </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/executing-shell-commands-with-python">Ejecutar comandos de Shell con Python </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/computer/73/what-is-special-character.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="¿Qué es un personaje especial?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/es/computer/">Computadora </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/es/what-is-special-character">¿Qué es un personaje especial? </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Todos Los Derechos Reservados |
<a href="//www.techcodeview.com/fi/">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: #0ea5e9; 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: #0284c7; }
`,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>