Почему два элемента с шириной 50% переносятся в CSS

Быстрый ответ

Для корректной работы элементов с display: inline-block и установленной шириной width: 50%, необходимо устранить все пробелы. Это можно сделать с помощью HTML-комментариев или установки font-size: 0 родительскому контейнеру принудительно, а затем скорректировать размер шрифта для дочерних элементов. Так каждый элемент будет занимать строго половину ширины контейнера.

<div>
  <div style="width: 50%; display: inline-block;">Первый блок</div><!--
  --><div style="width: 50%; display: inline-block;">Второй блок</div>
</div>

Не забудьте настроить отступы и поля, используя box-sizing: border-box;.

Устранение пробелов между inline-block элементами

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

• Удаление неуместных пробелов: Избавьтесь от всех пробелов между элементами, чтобы они расположились бок о бок без нежелательных переносов.
• Хитрость с размером шрифта: Назначьте font-size: 0 для родителя, чтобы убрать пространство, занимаемое пробелами, а затем назначьте дочерним элементам требуемый размер шрифта.
• Магия CSS: Установите white-space: nowrap; для родительского элемента и white-space: normal; для дочерних, чтобы управлять переносом строк.

Использование Flexbox: элегантная альтернатива

Если работа с display: inline-block; кажется вам излишне затруднительной, рассмотрите возможность использования flexbox. Эта модель CSS-макетирования помогает тонко управлять распределением пространства и выравниванием элементов.

.container {
  display: flex;
}
.item {
  flex: 1; /* Если бы все было так же просто, как в спортзале! */
}

<div class="container">
  <div class="item">Первый элемент</div>
  <div class="item">Второй элемент</div>
</div>

Обратите внимание, что возможности flexbox могут быть ограниченными в устаревших версиях IE, поэтому, если возможно, предполагайте альтернативные варианты.

Эксперименты: не только для ученых-эксцентриков

Будь вы создатель чудища по имени Франкенштейн или разработчик, заботящийся о каждом пикселе, экспериментируйте с кодом, используя инструменты вроде JSFiddle, чтобы увидеть изменения в реальном времени.

И помните: код может вести себя по-разному в разных окружениях (вьюпортах). Поэтому важно гарантировать, что ваш макет будет адаптивным.

Визуализация

Представьте себе однополосный мост (🌉):

🚗 Ширина: 50% 🚙 Ширина: 50% 🌉 Ширина: 100%

Две полосы для авто, каждая из которых занимает половину моста, но они не могут ехать по нему рядом. Давайте попробуем выяснить, что не так:

Первый сценарий (Ожидаемое): 
🚗🚙
🌉
🛑 Ой! Машины вместе не проезжают! 🛑

Второй сценарий (Решение): 
🚗🌉  
🚙🌉
✅ Если настроить box-sizing и отступы правильно, машины смогут свободно преодолеть мост! ✅

Удаление лишнего пространства помогает избегать нежелательного переноса элементов на новую строку.

Тестирование, применение, повторение

Следите за совместимостью с различными браузерами — CSS-хаки могут вызвать проблемы. Используйте стандартные решения, учитывайте адаптивность и, конечно, не забывайте о доступности.

Осторожно, блочная модель

Маргины, паддинги и границы могут внезапно изменить ваш макет. Держите эти параметры под контролем с помощью блочной модели, чтобы избежать неприятных сюрпризов с переносом элементов на новую строку.

Полезные материалы

1. Полный гид по Flexbox | CSS-Tricks — Все, что вам нужно знать о Flexbox.
2. box-sizing – CSS: Cascading Style Sheets | MDN — Подробная статья о box-sizing и его особенностях.
3. Сайт Can I use... Support tables for HTML5, CSS3, etc — Проверка на совместимость с разными браузерами поможет избежать проблем.
4. CSS Layout – inline-block — Все о нюансах работы с inline-block.
5. Визуальная модель форматирования – CSS | MDN — Подробные сведения о базовых принципах CSS Layout.