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

问题:

This question already has an answer here:

• How do I remove the space between inline-block elements? 32 answers

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

回答1:

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>

回答2:

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

回答3:

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 }

回答4:

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>

回答5:

Additionally, some helpful techniques can be found listed here:

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

回答6:

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

回答7:

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

回答8:

You should also specify:

padding: 0;

转载请标明出处:How do I remove extra margin space generated by inline blocks? [duplicate]

文章来源: How do I remove extra margin space generated by inline blocks? [duplicate]