Поясните, откуда отступы по бокам

Курсы §15. Сетки
1

Поясните, пожалуйста, откуда здесь отступы справа.

body {
font-size: 16px;
font-family: “PT Sans”, sans-serif;

}

h1 {
margin: 0;
margin-bottom: 0.5em;
font-size: 18px;
}

.container {
width: 400px;
margin: 20px auto;
}

.catalog {
width: 400px;
background: #ecf0f1;
box-shadow: 0 0 3px #999999;
}

.item {
display: inline-block;
width: 116px;
min-height: 75px;
margin-bottom: 20px;
text-align: center;
color: white;
background: #3498db;
border: 2px solid #2c3e50;
}

2

разъясняется в Сетки/inline-block и пробелы в коде [31/32]

1 лайк
3

Спасибо. Опять у меня вопросы возникают раньше, чем на них в курсе дают ответ :slight_smile:

4

Следующий занятный момент в борьбе с пробелами.

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

А что если поступить так. При указании margin’ов есть возможность воспользоваться функцией Calc, и здесь более логичным представляется использование относительных размеров. Получается, межсловный пробел (тот же пробел между элементами inline-block), определяется видом и размером шрифта.
Грубо говоря формула расчёта пробел=a*x, где а - коэффициент, зависящий от вида шрифта, а Х - кегль (размер шрифта).
Разработчик, прописывая шрифт, дополнительно может прописать запасной шрифт, в случае отсутствия первого у пользователя, а также группу шрифтов, из которой будет выбран шрифт при отсутствии конкретно указанных. Т.е. разработчик изначально знает с каким коэффициентом будут его шрифты. Далее, при расчёте можно использовать REM, либо EM.
Получается, правило

margin: 0 calc(10px - 0.35em);

выдаст для элементов inline-block чётко 10px - левый и правый отступы для широких типов шрифтов. А предложенные 4-5px актуально для 16px шрифта.

5

а где этот коэффициент можно посмотреть?

6

Посмотреть - едва ли получится.
Для начала придётся изучить понятия и определения типографики.
Затем нелишним будет ознакомиться со статьёй на Хабре https://habrahabr.ru/post/23250/

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

font.jpg1366×768 183 KB

В примере, буква ф (малая) взята для самопроверки, т.к. она имеет и верхний и нижний выносной элементы и можно проверить соответствие font-size и размера полученного, в моём случае, программной линейкой.
Затем замерил пробел между буквами П П. Соотношение полученного результата к кеглю дало 0.567. Вот и коэффициент. Хотя на Хабре указывается что подобный коэффициент варьируется от 1/5 до 1/2 круглой. Здесь на 7 соток больше.
Наверное можно отнести к погрешностям или особенностям шрифта, которые мне не известны. Стоит учесть что замер поверочной буквы Ф дало 192px, а не заявленные 200px. Если рассчитывать это как относительную погрешность, то коэффициент становится 0.525. Хотя визуально, чтобы эти “сотки” стали заметны нужно текст на сайте писать ну о-о-о-чень огромным шрифтом.
Чуть не забыл, выбирая буквы для замера, стоит избегать “особенных” букв типа Г А Д :slight_smile:(Прошу прощения) - к которым применим кернинг.

2 лайка