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

Question

Estoy usando este CSS para formatear dos columnas, pero todavía 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; 
} 

Answer 1

Tal vez usted tiene:

<div class="col1"> 
    Stuff 1 
</div> 
<div class="col2"> 
    Stuff 2 
</div> 

? 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:

<div class="col1"> 
    Stuff 1 
</div><div class="col2"> 
    Stuff 2 
</div> 

Answer 2

También debe especificar:

padding: 0; 

Answer 3

aplican float: left y que se eliminará el espacio para que el texto no tiene que estar en la línea 1.

Answer 4

Como alternativa, para arreglar esto sin cambiar el formato de su código fuente, puede crear un elemento adicional.

si estuviera haciendo esto en una lista que se vería así:

<ul > 
    <li> 
     <a href="#">Solutions Overview</a> 
    </li>  
</ul> 


<style type="text/css">    
    ul {word-spacing:-1em;} 
    ul li a{word-spacing:0;} 
</style> 

Answer 5

Además, algunas técnicas útiles se puede encontrar figuran en esta lista:

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

Answer 6

Los elementos con el atributo inline-block se comportarse 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:

<div></div><div></div> 

se representará de manera diferente a

<div></div> 
<div></div> 

See a live example here

Puede resolver este problema utilizando HTML de la siguiente manera:

O colocar todos los elementos de la misma línea, es decir,

<div> 
    // CONTENT 
</div><div> 
    // CONTENT 
</div><div> 
    // CONTENT 
</div> 

o el uso de HTML comentarios para eliminar los espacios

<div> 
    //CONTENT 
</div><!-- 
--><div> 
    //CONTENT 
</div> 

Puede resolver este problema mediante CSS de la siguiente manera:

Establecer el atributo font-size: 0 en la matriz, es decir

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

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

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

Answer 7

Un simple font-size:0 al elemento primario funcionará.

Answer 8

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

<div class="col-set"> 
    <div class="col1"> 
     Stuff 1 
    </div> 
    <div class="col2"> 
     Stuff 2 
    </div> 
</div> 

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