Как бороться с inline-block и его отступами?

Question

[Дмитрий Анисимов]

я не понимаю как сделать так что-бы эти отступы в моей колонке не мешали мне
смотрите rollerstore.ru
я вроде задал -4 px каждому
потом задал обложке 4px чтобы он впадал в него с левой стороны для адаптива потому-что выставлять через селекторы это трудно
так как быть то а?

Comments

[hesrun]

Если юзаете инлайн блоки, родителю обнуляйте шрифт, а потом в каждом инлайн блоке прописывайте нужны фонтсайз.
Все разваливается из-за пробелами между инлайн- блоков. Или в хтмл, удаляйте пробелы, но разметка тогда будет не читаема.

-4пкс это костыль, не нужно так делать.

[Дмитрий Анисимов]

hesrun, в картинках нет шрифта он та тут причем

[hesrun]

Dmz_wow, а может поспорим? Пример
дело, не в том есть ли у вас текст в блоках, инлайн-блоки, это элементы гибрид блока и инлайнового.
Поведение в потоке документа у него как у любого инлайнового элемента, и по этому он сохраняет за собой пробелы, в отличии от блочного элемента.
Переход на новую строку в хтмл разметки и есть один пробел. Если ваши инлайн-блоки поставить друг за другом, то пробелы исчезнут и обнулять фонтсайз не нужно...

[Ankhena]

Разберитесь с флексами, не делайте костыли.

Answer 1

[Андрей Федоров]

Есть несколько вариантов решения вопроса.

1. Лучший. Изучите наконец flexbox.
2. Хороший. Между inline-block div уберите переводы строк и пробелы.
<div></div><div></div>
3. Неплохой. Между inline-block div закоментируйте переводы строк и пробелы.

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

4. Так себе. Для родителя содержащего все inline-block div задайте font-size: 0;

Comments

[Дмитрий Анисимов]

во флексах вроде нельзя перемешать по 2 блока на след строку для адаптива

[Grigory S.]

flex-wrap: wrap;

[Вадим В]

Какие то монипуляции с тегами в html намного хуже чем через css сделать. Надеяться на то, что отступы между тегами сохранятся так как это было задумано не умно... Конечно же флексбоксы и гриды лучше подойдут...

[hesrun]

Мда уж... Падаван, выбрал 3-й вариант, интересно чем он руководствовался.

[Ankhena]

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

Нормальное решение это флексы.

Answer 2

[Вадим В]

css-live.ru/articles/zagadochnye-otstupy-mezhdu-in... Вот нашел целую статью с множеством примеров как с этим бороться. Самый лучший способ как по мне это поставить

.dor { font-size: 0 }
.nav ul { font-size: 0; }
.nav li { font-size: 16px; }

Comments

[Дмитрий Анисимов]

да не в меню дело

[Дмитрий Анисимов]

а в колонке с картинками

[Вадим В]

Dmz_wow, я же написал, да и принцип такой же .dor { font-size: 0 }

[Дмитрий Анисимов]

reyzele, а причем тут размер шрифта и размер картинки?)

[Вадим В]

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

Answer 3

[sorokinfil]

Если я правильно понял, нужно убрать лишнее пространство в 4px справа от картинок с чаем. Попробуйте сделать вычисляемый width у элемента с классом .dor.
width: calc(100% + 4px);
Благодаря этому отступ справа в 4px должен уйти за пределы экрана.
Обновлено: если появляется скролл, должен убраться через overflow: hidden у родительского для .dor блока.

Comments

[Дмитрий Анисимов]

если я уберу пробелы в коде все будет нормально
значит проблема в inline-block

[sorokinfil]

Тогда старайтесь открывать тег сразу после закрытия, без пробелов и переносов. Если работает, то лучше не мудрить.
Либо вот что я написал, помогает при разрывах.

[Дмитрий Анисимов]

Филипп Сорокин, у вас скрол внизу есть значит отступ еще есть

[sorokinfil]

А, да. Решается через overflow: hidden на вышестоящем по иерархии блоке.