En este artículo, veremos cómo configurar el espaciado entre letras usando CSS.
Enfoque: La propiedad CSS de espaciado entre letras se utiliza para establecer el comportamiento del espaciado horizontal entre los caracteres del texto. Este valor se agrega al espaciado natural entre caracteres mientras se representa el texto. Los valores positivos ayudan a expandir el texto mientras que los valores negativos ayudan a contraer el texto.
Sintaxis:
/* Keyword value */ letter-spacing: normal; /* <length> values */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px; /* Global values */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
letter-spacing: .2rem;
}
.div2 {
letter-spacing: 1px;
}
.div3 {
letter-spacing: normal;
}
.div4 {
letter-spacing: -1px;
}
</style>
</head>
<body>
<div class="div1">
GeeksforGeeks (letter-spacing: .2rem)
</div>
<div class="div2">
GeeksforGeeks (letter-spacing: 1px)
</div>
<div class="div3">
GeeksforGeeks (letter-spacing: normal)
</div>
<div class="div4">
GeeksforGeeks (letter-spacing: -1px)
</div>
</body>
</html>
Producción:
Nota: Esta propiedad tiene algunas limitaciones-
- Esta propiedad no puede utilizar unidades de porcentaje.
- Esta propiedad no se puede utilizar con texto justificado.
Publicación traducida automáticamente
Artículo escrito por anshubajaj911 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA