El enfoque de este artículo es crear un espacio entre las viñetas y el texto usando CSS. Esta tarea se puede realizar utilizando la propiedad padding-left de CSS . Se utiliza para establecer el ancho del área de relleno a la izquierda de un elemento.
Sintaxis:
padding-left: length|percentage|initial|inherit;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
li {
padding-left: 23px;
}
</style>
</head>
<body>
<h1 style="color:green;
text-align:center">
GeeksforGeeks
</h1>
<h2 style="text-align:center">
How to create space between
list bullets and text in HTML?
</h2>
<!-- padding-left property used here -->
<p><b>list of fruits</b></p>
<ul>
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Potatto</li>
</ul>
</body>
</html>
Producción:
Los navegadores compatibles se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA