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

propiedades css

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo elimino el espacio entre los elementos de bloque en línea? 34 respuestas

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;
}

Answer 1

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

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

Answer 2

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

<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 3

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; }

Answer 4

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:

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

se traducirá de manera diferente a

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

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,

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

o use comentarios HTML para eliminar los espacios

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

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
}

Answer 5

Quizás tienes:

<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 6

También debe especificar:

padding: 0;

Answer 7

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

Answer 8

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