Jak usunąć dodatkowe marginesy wygenerowane przez wstawione bloki?

Question

Używam tego css do formatowania dwóch kolumn, ale nadal otrzymuję margines między dwoma. Mogę go wyeliminować za pomocą margin-left: -4px; lub niektórych takich. Czy istnieje bardziej elegancki sposób na to, czy coś jest nie tak z kodem 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

Być może masz:

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

? Jeśli tak, to prawdopodobnie jest to biały problem (okazuje się, że białe spacje mają znaczenie w html). Powinno to naprawić:

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

Answer 2

Należy również określić:

padding: 0; 

Answer 3

zastosuj spławik: lewy i spowoduje to usunięcie spacji, aby tekst nie musiał znajdować się na 1 linii.

Answer 4

Alternatywnie, aby rozwiązać ten problem bez zmiany formatowania kodu źródłowego, można utworzyć dodatkowy element.

Jeśli robisz to na liście to będzie wyglądać:

<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

Dodatkowo kilka przydatnych technik można znaleźć wymienionych tutaj:

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

Answer 6

Elementy z atrybutem inline-block będzie zachowują się tak, jakby były inline (stąd nazwa), dlatego wszelkie napotkane spacje będą traktowane jak spacja. Na przykład:

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

zostanie wygenerowana inaczej

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

See a live example here

Można rozwiązać ten problem przy użyciu języka HTML w następujący sposób:

Albo umieścić wszystkie elementy na ta sama linia, tj.

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

lub używać HTML komentarze do zlikwidowania przestrzenie

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

można rozwiązać ten problem przy użyciu CSS następująco:

Ustaw atrybut font-size: 0 na rodzica, czyli

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

lub ustaw atrybut zoom: 1 na rodzica, tj.

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

Answer 7

Prosty font-size:0 do elementu nadrzędnego będzie działać.

Answer 8

Rozwiązanie problemu spowoduje także usunięcie elementu nadrzędnego.

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