¿Cómo elimino el margen del elemento li?

Tengo los siguientes html

  • one
  • two
  • three

y folliwing css

 li { display: inline-block; padding: 10px; border: 1px solid red; margin: 0; } 

MANIFESTACIÓN

Estoy tratando de eliminar el margen entre los elementos li estableciendo el margin: 0; . Pero no elimina el margen

enter image description here

Cómo lo elimino

La combinación de todos los li s en una sola línea resuelve el problema. Pero si desea conocer más técnicas para eliminar esos márgenes, puede visitar: http://davidwalsh.name/remove-whitespace-inline-block .

Enumera estas técnicas:

1. Sin espacio entre elementos

 
  • Item content
  • Item content
  • Item content

2. font-size: 0 en Parent

 .inline-block-list { /* ul or ol with this class */ font-size: 0; } .inline-block-list li { font-size: 14px; /* put the font-size back */ } 

3. Comentarios HTML

 
  • Item content
  • Item content
  • Item content

4. Margen negativo

 .inline-block-list li { margin-left: -4px; } 

5. Dejar caer el ángulo de cierre

 
  • Item content
  • Item content
  • Item content

Prueba float: left; Eso obligará a los elementos de la lista a representarse sin espacio en blanco adicional.

 li { display: inline-block; padding: 10px; border: 1px solid red; margin: 0; float: left; } 

Es extraño que necesites quitar el espacio en blanco eche un vistazo a este violín

 
  • one
  • two
  • three

http://jsfiddle.net/TPje6/3/

Otra cosa que puede hacer es agregar un margin: -2px; : http://jsfiddle.net/TPje6/6/

El truco de flotación funciona bien también, pero hace que el estilo sea más difícil

Cambiar marca en una línea para eliminar espacios en blanco predeterminados

 
  • one
  • two
  • three

Css

 li { display: inline; // Change padding: 10px; border: 1px solid red; margin: 0; } 

Manifestación

Este es un molesto efecto secundario de cómo se está renderizando el espacio en blanco para los elementos en línea. Hay algunas opciones que vienen a la mente para abordarlo.

Opción 1: use el float: left propiedad float: left en los elementos li

jsfiddle

 li { display: inline-block; padding: 10px; border: 1px solid red; margin: 0; float: left; } 

Opción 2: elimine los espacios en blanco de la marca html

jsfiddle

 
  • one
  • two
  • three

Opción 3: establecer la propiedad del font-size de ul en 0px

jsfiddle

 ul { font-size: 0px; } li { display: inline-block; padding: 10px; border: 1px solid red; margin: 0; font-size: 16px; } 

Usted podría hacer que el li sea font-size: 0; y luego configure la li a a font-size normal

De esta forma, hará que el espacio en blanco sea ​​de 0 píxeles de ancho y mantenga su html limpio y fácil de leer.

Usa la siguiente regla CSS para renderizar estilo

 li { border: 1px solid #FF0000; display: table-column-group; float: left; margin: 0; padding: 10px; } 

enter image description here