Что за div-ные отступы?

268

15 апреля 2018, 21:12

В блоке div содержится элемент img. Высота img 800, а в браузере div в высоту почему-то 804. Паддингов и марджинов нет (как и прочего содержимого, которое может появиться в перспективе).

Answer 1

Это проблема многих контейнеров: block, inline, inline-block

.ib { 
  display:inline-block; 
  border:10px solid red; 
}

<div class="ib"> 
<img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" width="100"/> 
</div>

Решается предельно просто указывая font-size:0; но если вам понадобится добавить текст создайте для него отдельный блок.

* { 
  margin:0; 
} 
.ib { 
  font-size:0; 
  display:inline-block; 
  border:10px solid red; 
}

<div class="ib"> 
 
<img src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426" width="100" /> 
 
</div>