Когда я использую элементы со свойством, inline-block
я получаю пробел между элементами:
html, body { margin: 0; padding: 0; }
.padre .hijo {
display: inline-block;
padding: 5px;
background-color: red;
}
<div class="padre">
<div class="hijo">Hijo 1</div>
<div class="hijo">Hijo 2</div>
<div class="hijo">Hijo 3</div>
</div>
Почему это происходит и есть ли способ убрать этот эффект?
Поведение пространств является частью элементов
inline
иinline-block
.По умолчанию к элементам
inline
применяются свойстваletter-spacing
иword-spacing
( См. индекс свойства ), которые зависят от размера , которыйfont-size
они наследуют от родительского элемента, а поскольку элементы находятся на каждой строке отдельно,DOM
при рендеринге генерируется пробел (отображается с помощью_
:Теперь мы увидим множество решений, которые вы можете дать для устранения пробелов в
DOM
или с помощью правил вCSS
:№1. Удалить пробелы между элементами:
CSS
#два. Добавить комментарии (пусто):
CSS
№3. Мы устанавливаем размер шрифта
font-size
равным нулюDOM
CSS
№ 4. договоренность
white-space
сmargin
DOM
CSS
№ 5. Мы вычитаем в
letter-spacing
DOM
CSS
№ 6.
flex
в доме (благодаря современным браузерам)DOM
CSS
Источники:
Вы можете заменить это следующим
display: inline-block
образомfloat:left
: