что такое space bug [дубликат]

191

18 апреля 2018, 04:45

На данный вопрос уже ответили:

Как прижать блоки друг к другу? 3 ответа

что такое space bug ? и какие есть методы его исправления ?

Answer 1

Этот баг - пробел между инлайн-блоками

.ib { 
border:1px solid black; 
width:100px; 
height:100px; 
display:inline-block; 
}

<div class="ib"> 
 
</div> 
<div class="ib"> 
 
</div> 
<div class="ib"> 
 
</div> 
<div class="ib"> 
 
</div> 
<div class="ib"> 
 
</div> 
<div class="ib"> 
 
</div>

Для его решения нужно убрать пробелы но код будет выглядеть некрасиво

.ib { 
border:1px solid black; 
width:100px; 
height:100px; 
display:inline-block; 
}

<div class="ib"></div><div class="ib"></div><div class="ib"></div><div class="ib"></div><div class="ib"></div><div class="ib"></div>

Или воспользоватся flexbox

.ib { 
  border: 1px solid black; 
  width: 100px; 
  height: 100px; 
 
} 
.c { 
    display: flex; 
}

<div class="c"> 
<div class="ib"></div> 
<div class="ib"></div> 
<div class="ib"></div> 
<div class="ib"></div> 
<div class="ib"></div> 
<div class="ib"></div> 
 
 
</div>

Либо float

.ib { 
  border: 1px solid black; 
  width: 100px; 
  height: 100px; 
  float:left; 
}

<div class="ib"></div> 
<div class="ib"></div> 
<div class="ib"></div> 
<div class="ib"></div> 
<div class="ib"></div> 
<div class="ib"></div>

Ну и напоследок отрицательный margin

.ib { 
border:1px solid black; 
width:100px; 
height:100px; 
display:inline-block; 
margin:-2px; 
}

<div class="ib"> 
 
</div> 
<div class="ib"> 
 
</div> 
<div class="ib"> 
 
</div> 
<div class="ib"> 
 
</div> 
<div class="ib"> 
 
</div> 
<div class="ib"> 
 
</div>