Очень рад, что #задача_4 получила такой активный отклик! К мое | fomin

Очень рад, что #задача_4 получила такой активный отклик! К моему удивлению, очень многие хорошо сформулировали проблему и объяснили, почему же блоки не становятся в одну строку, но не так хорошо ориентировались в решениях. Я думал ситуация ровно обратная

Попробуем подвести итог:

1. Почему?

Когда мы превращаем элемент в inline-block - он получает преимущества строчных и блочных элементов. От строчных элементов инлайн-блок получит основную особенность - набирать свою ширину за счёт объёма контента внутри и возможность становиться частью строки. Именно это даёт нам возможность выстроить несколько блоков в ряд.

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

Откуда берётся этот пробел? Он возникает из-за того, что мы форматируем код, и каждый наш перенос кода на новую строку, создаёт какое-то количество пробелов, а браузер потом это всё равно отображает как один пробел. Я думаю вы знаете про такое поведение.

Мы убедимся, что это пробелы, если попробуем записать наши инлайн-блоки в строку:



Теперь никакой проблемы - блоки стали в одну строку, как и планировалось. Однако так записывать код мы не можем, потому, что при большом объёме кода такое форматирование сделает код абсолютно не читаемым.

2. Как исправить?

В интернете описано много способов решения этой проблемы (например тут и тут). Однако хороших способов не так уж и много.

Я не буду разбирать способы, которые считаю плохими, расскажу только о тех, которые считаю адекватными.

2.1. Если размер шрифта равен нулю, то и размер пробела будет равен нулю.

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





Проблема решена, пробелов нет. Но использовать такой способ не получится, если в вашей вёрстке используются относительные размеры шрифтов, потому как вы будете ломать наследование этим обнулением и ничего хорошего из этого не выйдет. В случае, когда у вас все размеры шрифтов указаны в пикселях, такой способ будет вполне непробиваемым.

2.2. Если проблема заключается в наличии пробела, то просто уберите его

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




Мы можем воспользоваться этой возможностью не совсем по назначению, и это решит нашу проблему.



Что я только что сделал? Я создал комментарий, который начинается сразу после закрывающего тега