¿UL tiene margen o relleno predeterminado [duplicado]
Esto puede parecer una pregunta tonta, pero agregué una UL a una página básica y la lista parece estar descentrada. No hay nada especial en la lista. No se agregó ningún CSS específico: solo una lista. Cuando cargo en vivo, está ligeramente descentrado.
¿Hay un margen predeterminado o relleno en el lado izquierdo?
<h3>Title Heading</h3>
<ul id="listItems">
<li>itemOne</li>
<li>itemTwo</li>
<li>itemThree</li>
</ul>
El cuerpo principal tiene todo el código CSS para centrar, alinear, flotar, etc. El 'Encabezado de título' se alinea perfectamente. Sólo la lista está un poco fuera de lugar.
Gracias.
Oh, no sé si esto es importante, pero agregué la 'id' porque... quería usar 'primero de tipo' para darle el primer elemento em (negrita).
El problema es que, de forma predeterminada, los navegadores tienen CSS personalizado, en Chrome, por ejemplo:
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
Tendrás que usar una regla personalizada para tu ul:
element.style {
margin-left: 0px;
/* set to 0 if your not using a list-style-type */
padding-left: 20px;
}
Las listas siempre se alinearán para que el texto permanezca alineado con el borde del elemento principal. Esto significa que las viñetas se ubicarán de forma predeterminada fuera (a la izquierda) del elemento. Puede forzar que la alineación se realice con la viñeta, no con el texto, así:
ul {
list-style-position: inside; }
Alternativamente, puedes simplemente agregar tu propio margen para empujar todo el elemento de la lista de esta manera:
ul {
margin-left: 20px; }
