Что за магия с относительными размерами элементов HTML CSS?

Question

[ioseogio]

Делаю в блоке .container три дочерних .box
Для .box задаю ширину 30% и отступ справа в 5%, каждому третьему .box обнуляю отступ справа.

В результате чего должно выйти следующее:


Но три блока не влазят, и происходит перенос на следующую строчку.
Что сделать чтобы это работало, как должно работать?

P.S: рамки тут ни при чем, пробовал убирать, и результат тот же.

UPD: Если сделать, чтобы 3 блока влезло в одну строку, то при приближении к определенному размеру экрана они все равно переносятся на новую, хотя ширина и отступы указаны в процентах.

UPD2:
CSS:

.container
{
		text-align: left;
		border: 1px solid red;

		.box 
		{
			display: inline-block;
			width: 30%;
			margin-right: 5%;

			border: 1px dashed black;
			min-height: 100px;
		}

		.box:nth-child(3n)
		{
			margin-right: 0;
		}
}

HTML:

<main class="container">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</main>

Comments

[kamisarlapsha]

Покажи код, а то будем гадать долго.

[snap44]

Нужно код исправить просто.

[dollar]

Экспериментируйте. Сделайте 29%. Попробуйте <nobr> и т.п.

[ioseogio]

snap44, очень информативно.

[ioseogio]

dollar, Изменять размеры это просто, но почему ширина блока не относительна, хотя я указываю ее в процентах? Я именно это хочу понять, ибо проще всего влепить 25% и срать что справа отступ будет у каждого третьего или бахнуть флексы.

[dollar]

Либо вы что-то забыли, либо особенности браузера.
Попробуйте в разных браузерах.
Попробуйте сделать общую ширину 100, потом скриншот - и считайте по пикселям. 30% должно быть 30 пикселей.

[snap44]

ioseogio, как был оформлен вопрос, такой и был дан ответ.

Answer 1

[Никита Егоров]

У блоков с display: inline-block есть свои отступы, их надо убрать, указав контейнеру font-size: 0;

Comments

[ioseogio]

Сработало, то, что и пытался понять) Спасибо всем за ответы.

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

Eсли вы считаете размеры шрифтов руками или на глазок, тогда конечно все равно, но не надо так делать. Размер шрифта потом придется восстанавливать, а он не известен, если его не сохранить где-то отдельно.

[Никита Егоров]

Андрей Федоров, чего? Вот у меня секция, боксам я указал размер допустим 20rem. Для того что бы убрать отступы, контейнеру указал 0. Что не известно и что придется восстанавливать?

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

Никита Егоров, То что вы указали в боксах размер текста 20rem, означает, что размер текста у вас расчитывается на основе размера указного в теге html, а между html и .box, может быть еще куча контейнеров, в которых задан свой размер шрифта.

[Никита Егоров]

Андрей Федоров, ну да, для этого я использую rem, что бы не относительно от контейнеров, а относительно от html. Что бы потом при адаптиве можно было изменять размер только html. Я так и не понял, что вам не нравится?

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

Никита Егоров, в реальном проекте у вас контейнер обернут во множество оберток. В каждой из них у вас может быть свой размер шрифта, а вложенные элементы должны его наследовать. Обнуляя размер шрифта для контейнера, а потом восстанавливая его в .box 1rem вы лишаетесь возможности наследования. Если все еще не понятно, можете не заморачиваться.

[Никита Егоров]

Андрей Федоров, rem наследуют от html, у него нет никакого наследования от оберток к обертке и так далее. Скорей всего вы спутали его с em.

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

Никита Егоров, в этом и проблема, что наследования нет. у вас в боксах должен быть совершенно другой размер шрифта, в зависимости от всех оберток, а не в зависимости от html. Для понимания сути проблемы https://codepen.io/aliencash/pen/JaWmmm?editors=1100

[Никита Егоров]

Андрей Федоров,

должен быть

ну это решать разработчику, кому как ему удобнее. Использовать rem или em. Мне лично rem больше нравится.

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

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

[Никита Егоров]

Андрей Федоров, о боже...

https://habr.com/post/280125/

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

Никита Егоров, вы ведь так и не поняли в чем проблема, так?

[Никита Егоров]

Андрей Федоров, вы говорите что нет наследования размеров шрифта. Ну окей, что теперь. Использую rem и вроде норм.

[hckn]

Сделать 0 для размера шрифта - это единственный выход для инлайн блоков. Не пойму недовольства Андрей Федоров,

Есть другой вариант без критики? А то нафлудили 20 комментов а толку 0.

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

Никита Егоров, ок

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

hckn, вы ошибаетесь. не единственный и не лучший.

<div class="container">
    <div class="box"></div
    ><div class="box"></div
    ><div class="box"></div>
</div>

или так

<div class="container">
    <div class="box"></div><div class="box"></div><div class="box"></div>
</div>

или так

<div class="container">
   <div class="box"></div><!--
--><div class="box"></div><!--
--><div class="box"></div>
</div>

Еще есть вариант с отрицательным letter-spacing, однако в некоторых случаях этот вариант так же нуждается в восстановлении межсимвольного интервала.

.container {
   letter-spacing: -1em;
}

Answer 2

[bini1988]

Между inline элементами по умолчанию всегда есть пробельный символ, как его убрать выше уже подсказали, альтернатива использовать float или flex-box

Comments

[Volodya11Let]

Между инлайн элементами есть пробельный только если вы его туда написали либо расположили открывающий тэг на новой строке. Не нужно вводить людей в заблуждение. По умолчанию его там нет.

[bini1988]

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