How do I remove extra margin space generated by inline blocks? [duplicate]

This question already has answers here: How to remove the space between inline/inline-block elements? (41 answers) 开发者_开发技巧 Closed 8 years ago.

I am using this css to format two columns but I am still getting margin space between two. I can eliminate it with use of margin-left: -4px; or some such. Is there a more elegant way to do this or is there something wrong with the CSS code?

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

---

Perhaps you have:

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

? If so then this is probably a whitespace problem (it turns out whitespace does matter in html). This should fix it:

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

---

A simple font-size:0 to the parent element will work.

---

The elements with attribute inline-block will behave as if they are inline (hence the name), and therefore any whitespace encountered will be treated as a space. For example:

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

will be rendered differently to

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

See a live example here

You can solve this problem using HTML as follows:

Either place all your elements on the same line, i.e.

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

or use HTML comments to remove the spaces

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

You can solve this problem using CSS as follows:

Set the attribute font-size: 0 on the parent, i.e.

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

or set the attribute zoom: 1 on the parent, i.e.

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

---

Alternatively, to fix this without changing the formatting of your source code, you can create an additional element.

If you were doing this in a list it would look like:

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


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

---

apply float:left and that will remove the space so the text doesn't have to be on 1 line.

---

Additionally, some helpful techniques can be found listed here:

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

---

Making the parent element font-size: 0 will also resolve the issue.

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

---

You should also specify:

padding: 0;