html - ¿Tiene UL margen o relleno por defecto

css alignment

Question

Esta pregunta ya tiene una respuesta aquí:

• Eliminar la sangría ul con respuestas CSS 3

Esto puede parecer una pregunta tonta, pero he agregado un 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 o relleno predeterminado 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. Solo la lista está un poco apagada.

Gracias.

Oh, no sé si esto es importante, pero agregué la ''id'' porque ... quería usar ''first-of-type'' para dar el primer elemento em (negrita).

Answer 1

El problema es que, de forma predeterminada, los navegadores tienen CSS personalizado, por ejemplo, en Chrome:

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á que usar una regla personalizada para su ul :

element.style {
    margin-left: 0px;
    /* set to 0 if your not using a list-style-type */
    padding-left: 20px;
}

Answer 2

Las listas siempre se alinearán para que el texto permanezca alineado con el borde del elemento padre. Esto significa que las viñetas se ubicarán por defecto fuera (a la izquierda) del elemento. Puede forzar la alineación para que ocurra en la viñeta, no en el texto de esta manera:

ul {
  list-style-position: inside; }

Alternativamente, puede agregar su propio margen para empujar todo el elemento de la lista de esta manera:

ul {
  margin-left: 20px; }