En este artículo veremos la propiedad que se utiliza para sangrar el texto de un párrafo. La propiedad text-indent en CSS se usa para definir la sangría de la primera línea en cada bloque de texto. También toma valores negativos. Significa que si el valor es negativo, la primera línea se sangrará a la izquierda.
Sintaxis:
text-indent: length|initial|inherit;
Ejemplo 1: El siguiente ejemplo demuestra la propiedad text-indent con valores de longitud y porcentaje.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- CSS text-indent property -->
<style>
.textIndent1
{
text-indent: 70px;
}
.textIndent2
{
text-indent: -5em;
}
.textIndent3
{
text-indent: 40%;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h2> text-indent Property</h2>
<h3>text-indent: 70px:</h3>
<div class="textIndent1">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<h3>text-indent: -5em:</h3>
<div class="textIndent2">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<h3>text-indent: 40%:</h3>
<div class="textIndent3">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
</body>
</html>
Salida :
Ejemplo 2: Este ejemplo demuestra la propiedad text-indent . Aquí solíamos establecer la propiedad de sangría de texto en su valor predeterminado.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- CSS text-indent property -->
<style>
.divClass
{
text-indent: initial;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h2> text-indent Property</h2>
<h3>text-indent: initial</h3>
<div class = "divClass">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
</body>
</html>
Salida :
Publicación traducida automáticamente
Artículo escrito por sravankumar8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA