Как удалить дополнительное пространство полей, созданное встроенными блоками?

Я использую этот css для форматирования двух столбцов, но я все еще получаю промежуток между двумя. Я могу устранить его с помощью margin-left: -4px; или некоторых таких. Есть ли более элегантный способ сделать это или что-то не так с кодом 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;
}

Ответы

Ответ 1

Возможно, у вас есть:

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

? Если это так, то это, вероятно, проблема с пробелами (оказывается, что пробел имеет значение в html). Это должно исправить это:

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

Ответ 2

Простой font-size:0 к родительскому элементу будет работать.

Ответ 3

В качестве альтернативы, чтобы исправить это, не изменяя форматирование исходного кода, вы можете создать дополнительный элемент.

Если вы делали это в списке, это выглядело бы так:

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


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

Ответ 4

Элементы с атрибутом inline-block будут вести себя так, как если бы они были встроенными (отсюда и название), и поэтому любые встреченные пробелы будут рассматриваться как пробел. Например:

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

будет отображаться по-разному с

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

Смотрите живой пример здесь

Вы можете решить эту проблему с помощью HTML следующим образом:

Поместите все ваши элементы в одну строку, то есть

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

или использовать комментарии HTML для удаления пробелов

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

Вы можете решить эту проблему с помощью CSS следующим образом:

Задайте атрибут font-size: 0 для родителя, т.е.

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

или установите атрибут zoom: 1 для родителя, т.е.

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

Ответ 6

применить float: left, и это приведет к удалению пространства, поэтому текст не должен быть в 1 строке.

Ответ 7

Создание родительского элемента font-size: 0 также решит проблему.

<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

Вы также должны указать:

padding: 0;