Comment supprimer l'espace de marge supplémentaire généré par les blocs en ligne?

Question

J'utilise ce CSS pour formater deux colonnes mais j'obtiens toujours un espace de marge entre deux. Je peux l'éliminer en utilisant margin-left: -4px; ou certains autres. Existe-t-il une manière plus élégante de le faire ou y a-t-il un problème avec le code 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

Vous avez peut-être:

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

? Si c'est le cas, c'est probablement un problème d'espace (il s'avère que l'espace est important en html). Cela devrait le corriger:

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

Answer 2

Un simple font-size:0 à l'élément parent fonctionnera.

Answer 3

Les éléments avec l'attribut inline-block va se comporter comme si ils sont en ligne (d'où le nom), et, par conséquent, n'importe quel espace rencontrées seront traités comme un espace. Par exemple:

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

sera rendu différemment

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

Voir un exemple ici

Vous pouvez résoudre ce problème en utilisant le HTML comme suit:

Placer tous vos éléments sur la même ligne, c'est à dire

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

ou utiliser les commentaires en HTML pour enlever les espaces

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

Vous pouvez résoudre ce problème en utilisant le CSS comme suit:

Définissez l'attribut font-size: 0 sur le parent, c'est à dire

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

ou définissez l'attribut zoom: 1 sur le parent, c'est à dire

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

Answer 4

Alternativement, pour résoudre ce problème sans modifier la mise en forme de votre code source, vous pouvez créer un élément supplémentaire.

Si vous faisiez cela dans une liste, cela ressemblerait à:

     <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

De plus, certaines techniques utiles peuvent être trouvées ici:

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