Отступы в CSS: Внешние, внутренние, между текстом

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

А бывает вообще между текстом нужно сделать отступ и понимай как хочешь, ведь понятие между текстом штука обширная. Кому-то нужно сделать отступ между строками, кому-то между буквами, а кому-то между двумя разными текстами.

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

Отступ текста сверху, снизу и от края – знакомьтесь margin

Margin – это свойство позволяет создать отступ у блока, добавив такую небольшую подушку. С его помощью можно задать определенную величину от каждого края (верх, право, низ, лево)

Собственно, пример показывает, что у нас есть блок, размером в 300 пикселов, и каким-то чудом он стоит по середине.  Причем, margin задан странным образом, а именно margin:10px auto;

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

Сейчас я покажу на примере ниже, четыре типа записи margin, причем все они будут равны межу собой, хотя и по-разному записаны. Для наглядности я еще добавил окантовку (бордер) основному блоку страницы, чтобы было видно те самые заветные 10 пикселов отступа.

Что получается, свойство у margin отличается, но блоки абсолютно одинаковые. Все становится немного понятнее если какое-то из свойств изменить на скажем так не 10, а 20.

В каждом из блоков я заменил последнее значение на 20, и все блоки как-то, но отличаются друг от друга, и это уже стало заметно.

Все потому, что если мы задаем в свойствах для отступа одну цифру, то число применяется для всех сторон автоматически. То есть, если задали просто margin: 10px; по получаем по 10-ке со всех сторон.

Во втором случае, если margin: 10px 20px; то, автоматом засчитывает 10 пикселов для отступа сверху и 10 для отступа снизу, а 20 px для отступов от края, то есть лево и право.

Третий случай margin: 10px 20px 30px;,позволяет настроить блок следующим образом, первое число, задается для отступа сверху, второе число задается для левого и правого отступа, а вот третье число, для отступа снизу.

Случай номер четыре margin: 10px 20px 30px 40px; задает размер отступа для каждой стороны отдельно в порядке ВЕРХ, ПРАВО, НИЗ, ЛЕВО.

Но что означает свойство auto?

Банально, то и значит! Мы задаем автоматический отступ, а значит заполняем все пространство, которое доступно вокруг блока. Самый распространённый случай, когда мы задаем это свойство для левой и правой стороны, тогда как и в первом примере, блок расположится посередине страницы, но так как он меньше размеров страницы, то заполнив пустое пространство, он очутился по середине.

Но если задать auto для низа и верха, то значение будет равняться 0.

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

Делаем отступ изнутри – padding на все случаи

По факту, с padding все работает точно также, за исключением одной вещи. В нем не существует такого свойства как auto. А если вы даже попытаетесь его применить, то как минимум ничего не произойдет, ну а как максимум, валидатор выдаст ошибку.

В этом примере, четко видно, как работает padding, если в случае с margin у нас текст прилипал к блоку, то в этом случае, между краем блока и текстом есть какой-то отступ, что даже уже не так режет глаз, за исключением красного цвета внутреннего блока, если что сорян за него.

Как я уже писал, принцип работы точно такой же как и в случае в magrin:

  1. Padding: 10px; (задает автоматом 10 пикселов вверху, справа, внизу и слева)
  2. Padding: 10px 20px; (задает автоматом 10px вверху и внизу и 20px слева и справа)
  3. Padding: 10px 20px 30px; (Задает вверху 10px, внизу 30px и 20px слева и справа)
  4. Padding: 10px 20px 30px 40px; (Каждой стороне задает разное значение 10px вверху, 20px справа 30px внизу 40px слева)

Что? Отступ между текстом? Есть такое!

На самом деле, это называют немного иначе, ведь если мы используем padding и margin, то с ними мы делаем внутренний и внешний отступ, то с текстом это называют интервалом.

Обычно при верстке нам требуется установить межстрочный интервал, но меж буквенный интервал я практически никогда не использовал. Он чего всего портит эстетику шрифтов, но тем не менее он есть и бывает нужен, кроме того, есть еще и меж словный интервал (слово сам придумал, а как правильно назвать интервал между словами? Буду рад услышать в комментариях).

Глянь на пример, что мы видим?

Случай 1:

letter-spacing: 10px; Между буквами очень большой отступ,  чем мы практически отделили одну букву от другой.

Случай 2:

Слова остались целыми, и не такими как в первом примере, но между самими словами появился достаточно большой отступ, что же произошло? Если попытаться выделить пространство между словами, становится понятным что word-spacing: 10px; увеличивает размер пробела.

Случай 3:

В нем мы видим line-height: 30px;, и заметь, я добавил не 10, а 30, так как с 10-ткой мы бы практически ничего не заметили,  так как браузер уже автоматически задает какие-то свойства html тегам.

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

А значит, есть сама строка, и мы задали ей статическую высоту, естественно сама строка располагается по середине. Для наглядности можно поиграться с font-size, там становится ясно что и как.

В общем теперь ты в курсе, как делать отступы, внутри блока, снаружи блока и не только. Не забудь поделиться с друзьями если было полезно.

Оставьте комментарий