Коротко — причина в том, что процентная ширина дочернего блока считается относительно внутренней (content) ширины его «контейнера», а не обязательно «видимой» внешней ширины родителя, и на итог влияют паддинги/границы, поведение display/position/flex/inline-block и другие правила CSS. Подробнее — возможные причины и способы решения.
Почему \( 50%50\%50%;">… \) может не дать ровно половины:
- box-sizing: по умолчанию `box-sizing: content-box`. Если у родителя есть `padding` или `border`, то дочерний $50\%$ считается от content-width родителя, а внешняя «коробка» родителя шире — визуально половина не совпадает.
- padding/margin/border у дочернего добавляют дополнительную ширину и могут «выпирать» за половину.
- display/inline-block: между inline-block-элементами появляется пробел (видимая щель), из‑за чего два блока по $50\%$ не умещаются.
- position:absolute: проценты у абсолютно позиционированного элемента рассчитываются относительно блока-контейнера, который может отличаться от непосредственного родителя.
- flexbox: у flex-элементов поведение ширины регулирует flex-basis/min-width; просто `width: $50\%$` может не дать ожидаемого результата — лучше использовать flex-правила.
- родитель с width: auto или без «определённой» ширины — процент может быть рассчитан относительно более дальнего контейнера.
- глобальные отступы (например, у body) или ненулевой box-sizing у других элементов.
Способы корректного оформления адаптивного макета (варианты):
1) Универсально: учёт паддингов/бордеров
- Установите `box-sizing: border-box;` чтобы проценты включали padding/border:
- `* { box-sizing: border-box; }`
2) Flexbox (рекомендую для адаптива)
- Простой пример:
- `50%50\%50%;">Блок`
- Или дать `flex: 1` и управлять колонками через количество элементов.
3) CSS Grid
- Надёжно для колонок:
- `.parent { display:grid; grid-template-columns: repeat(2, 1fr); }`
- Дочерние займут ровно половину доступной ширины.
4) Учёт паддингов через calc
- Если нужно вычесть фиксированные отступы:
- `width: calc($50\%$ - $20\mathrm{px}$);`
5) Для inline-block — убрать пробел или обнулить шрифт родителя
- Удалить пробелы в HTML или `font-size: 0;` у родителя и восстановить font-size у детей.
6) Для абсолютного позиционирования — явный контейнер
- Убедитесь, что контейнер имеет `position: relative;` и нужную ширину; проценты у абсолютного элемента будут рассчитываться от этого контейнера.
7) Медиа‑запросы и относительные единицы
- Используйте `max-width`, `min-width`, `clamp()` и медиазапросы для адаптивности:
- `width: clamp($200\mathrm{px}$, $50\%$, $600\mathrm{px}$);`
Короткая шпаргалка:
- Если хотите «ровно половину» визуально — ставьте `box-sizing: border-box;` и либо используйте Flex/Grid, либо корректируйте через `calc()` учёт паддингов/междуэлементных пробелов.
- Для layout: prefer Flex/Grid over floats/inline-block for predictable adaptive behavior.
Если нужно, пришлите конкретный CSS/HTML (с паддингами/границами/позиционированием) — покажу точную правку.