¿Cómo elimino el espacio de margen adicional generado por los bloques en línea?

Estoy usando este CSS para formatear dos columnas, pero aún estoy obteniendo margen de espacio entre dos. Puedo eliminarlo con el uso de margin-left: -4px; o algo así. ¿Hay una manera más elegante de hacer esto o hay algo mal con el código CSS?

 div.col1{ display: inline-block; min-height: 900px; height: 100%; width 300px; margin: 0px; background-color: #272727; overflow: hidden; border: 1px dotted red; } div.col2{ display: inline-block; min-height: 900px; height: 100%; width: 620px; margin: 0px; vertical-align: top; border: 1px dotted red; overflow: hidden; } 

Quizás tienes:

 
Stuff 1
Stuff 2

? Si es así, este es probablemente un problema de espacio en blanco (resulta que el espacio en blanco sí importa en html). Esto debería solucionarlo:

 
Stuff 1
Stuff 2

Un font-size:0 simple font-size:0 para el elemento principal funcionará.

Los elementos con atributo inline-block se comportarán como si estuvieran en línea (de ahí el nombre) y, por lo tanto, cualquier espacio en blanco encontrado se tratará como un espacio. Por ejemplo:

 

se traducirá de manera diferente a

 

Vea un ejemplo en vivo aquí

Puede resolver este problema usando HTML de la siguiente manera:

Coloque todos sus elementos en la misma línea, es decir,

 
// CONTENT
// CONTENT
// CONTENT

o use comentarios HTML para eliminar los espacios

 
//CONTENT
//CONTENT

Puede resolver este problema usando CSS de la siguiente manera:

Establezca el atributo font-size: 0 en el elemento principal, es decir,

 parent { display: inline-block; font-size: 0 } parent * { font-size: 12px } 

o establezca el atributo zoom: 1 en el elemento primario, es decir,

 parent { display: inline-block; zoom: 1 } 

Alternativamente, para solucionar esto sin cambiar el formato de su código fuente, puede crear un elemento adicional.

Si estuvieras haciendo esto en una lista, se vería así:

   

Además, algunas técnicas útiles se pueden encontrar aquí:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

aplicar float: left y eso eliminará el espacio para que el texto no tenga que estar en 1 línea.

Hacer que el elemento padre font-size: 0 también resolverá el problema.

 
Stuff 1
Stuff 2
 .col-set { font-size: 0; } .col-set > div { font-size: 12px; } 

También debe especificar:

 padding: 0;