Убираем пробел в display: inline-block

29.06.2016 15:01

Свойство display: inline-block в css позволяет выставить элементы друг за другом, но образуют пробел, как отступ, между элементами.

Рассмотрим на примере:

 

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
<style>
li{
	width: 100px;
	height: 100px;
	display: inline-block;
	background: blue;
}
</style>

 

Как мы видим на картинке, блоки имеют между собой отступ, ширина которого зависит от font-size. По этому самый часто используемый способ, это задать родительскому элементу font-size: 0.

<style>
ul{
	font-size: 0;
}
</style>

Кроме этого можно просто избежать пробел, между элементами одним из следующий способов:

 

<ul>
	<li></li><!--
	--><li></li><!--
	--><li></li><!--
	--><li></li>
</ul>

 

 

 

<ul>
	<li></li><
	li></li><
	li></li><
	li></li>
</ul>

 

И прочие способы, которые не всегда можно реализовать.

Так-же стоит отметить, что при использовании текста, дочерним блокам (li) нужно указать font-size.

 

 
YZ4 (yz4)

Отредактировано YZ4 (yz4) 29 июня 2016 15:01

0 374
    icon   icon   icon   icon   icon
Комментариев нет

Войдите чтобы оставить комментарий

Лучшие