Почему сдвигается макет в 3 колонки, сделанный inline-block способом?
Всем привет. Я тренируюсь делать макеты разными способами и столкнулся с проблемой. При добавлении текста в макет, сделанный способом через Inline-block'и там все плывет. Про пробелы между тегами знаю, но разобраться все равно не смог. Объясните пожалуйста в чем дело. Вот ссылка на пример: https://study-projects.netlify.app/3cdw/
Дополнительно:
макеты (раскладки, сетки) делаются флексами или гридами. остальное не имеет смысла пробовать.
Тебе нужно переопределить фонт сайз и добавить дочерним блокам (inline-block`ам) вертикал элайн
.in-blocks { vertical-align: top; font-size: 20px; } |
.in-blocks { vertical-align: top; font-size: 20px; }
- Благодарю, заработало. А не можете, если не лень, объяснить механику этого выпадения - почему оно выпало? Стандартное вертикальное позиционирование (по умолчанию) инлайн элементов какое-то другое?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы столкнулись, связана с тем, что элементы, созданные с использованием свойства display: inline-block, могут сдвигаться из-за пробелов и переносов строк в HTML-коде. Это происходит из-за того, что браузер рассматривает эти пробелы как часть содержимого элемента.
Для решения данной проблемы можно использовать несколько подходов:
1. Удалить все пробелы и переносы строк между элементами в HTML-коде. Это позволит избежать сдвигов макета.
2. Установить значение font-size: 0; для контейнера, содержащего элементы с inline-block. Затем установить нужный размер шрифта для самих элементов. Этот способ также поможет избежать проблем с отображением.
3. Использовать комментарии в HTML-коде между элементами, чтобы исключить пробелы и переносы строк. Например:
<div class="inline-block-element"></div><!-- --><div class="inline-block-element"></div><!-- --><div class="inline-block-element"></div>
4. Использовать flexbox или grid для создания макета с тремя колонками. Эти методы позволяют более гибко управлять распределением элементов и избежать проблем с сдвигами.
Надеюсь, эти рекомендации помогут вам решить проблему с сдвигом макета в 3 колонки, созданных с использованием inline-block. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.