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