«загадочные отступы» между инлайн-элементами

Содержание:

Выравнивание текста
Параметры отступов в CSS
Делаем так, чтобы CSS принимал высоту строки за интерлиньяж
Как реализовать межстрочный интервал HTML
Установка междустрочного интервала
Отступ текста сверху, снизу и от края – знакомьтесь margin
- Но что означает свойство auto?
Изменение межстрочного интервала в списках
Синтаксис CSS padding и margin
- Синтаксис свойства CSS padding
- Пример для установки полей и отступов в HTML-списке
Горизонтальное и вертикальное выравнивание
inline-block
- inline-block — как буква

Выравнивание текста

Благодаря свойству CSS text-align, вы можете разместить заголовки вашего документа по центру, расположить текстовое содержимое относительно левого, либо правого края, или, может, вы готовите страницы к печати и необходимо выровнять их по ширине, подобно тому, как текст размещается в печатных изданиях.

Чтобы установить выравнивание для текста, используйте следующие ключевые слова со свойством text-align:

Значение	Описание
left	Выравнивает текст влево. Это значение по умолчанию (если направление текста слева направо).
right	Выравнивает текст вправо. Это значение по умолчанию (если направление текста справа налево).
center	Выравнивает текст по центру.
justify	Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст по ширине).

Давайте рассмотрим пример работы с выравниванием текста:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства text-align</title>
<style> 
div {
background-color : rgba(0, 255, 0, .1); /* задаём цвет заднего фона для всех элементов <div> */
}
.test {
text-align : left; /* задаём выравнивание текста влево */
}
.test2 {
text-align : center; /* задаём выравнивание текста по центру */
}
.test3 {
text-align : right; /* задаём выравнивание текста вправо */
}
.test4 {
text-align : justify; /* задаём выравнивание текста по ширине */
}
</style>
</head>
<body>
	<div class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. </div>
	<div class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю.</div>
	<div class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. </div>
	<div class = "test4">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</div>
</body>
</html>

В данном примере мы создали 4 (четыре) класса, которые определяют различные варианты выравнивания текста. Для всех элементов <div> мы установили цвет заднего фона rgba(0, 255, 0, .1).

Результат нашего примера:

Рис.60 Пример использования свойства text-align (выравнивание текста).

Параметры отступов в CSS

С помощью каскадных таблиц стилей существует возможность задавать отступы двух видов.

1. Внутренний отступ — это расстояние от воображаемой границы элемента до его содержимого. Величина расстояния задается с помощью параметра padding. Такой отступ принадлежит самому элементу и находится внутри него.

2. Внешний отступ — расстояние между границей текущего элемента веб-страницы и границами соседних элементов, либо родительского элемента. Размер расстояния регулируется свойством margin. Такой отступ находится вне элемента.

Для наглядности картинка:

Например, рассмотрим ячейку html таблицы заполненную текстом. Тогда внутренний отступ это расстояние между воображаемой границей ячейки и содержащимся в ней текстом. А внешний отступ это расстояние между границами соседних ячеек. Начнем с внутренних отступов.

Делаем так, чтобы CSS принимал высоту строки за интерлиньяж

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

Можно научить CSS делать интерлиньяж, если приложить немного усилий. Майкл Таранто создал инструмент Basekick, который применяется для достижения именно этой цели. Он придает свойству margin псевдоэлемента ::before отрицательное значение, а к самому элементу применяет функцию translateY. В результате этого мы получаем строку текста, которая не имеет никаких лишних отступов.

Последнюю версию формулы инструмента Basekick можно найти в исходном кодедизайнерской системы Braid от компании SEEK. В примере, приведенном ниже, мы используем примесь Sass, которая сделает всю тяжелую работу за нас. Такую же формулу можно создать с помощью примесей в JavaScript, Less, PostCSS или в чем-то другом, имеющем подобные математические функции.

@function calculateTypeOffset($lh, $fontSize, $descenderHeightScale) {
  $lineHeightScale: $lh / $fontSize;
  @return ($lineHeightScale - 1) / 2 + $descenderHeightScale;
}
 
@mixin basekick($typeSizeModifier, $baseFontSize, $descenderHeightScale, $typeRowSpan, $gridRowHeight, $capHeight) {
  $fontSize: $typeSizeModifier * $baseFontSize;
  $lineHeight: $typeRowSpan * $gridRowHeight;
  $typeOffset: calculateTypeOffset($lineHeight, $fontSize, $descenderHeightScale);
  $topSpace: $lineHeight - $capHeight * $fontSize;
  $heightCorrection: 0;
  
  @if $topSpace > $gridRowHeight {
    $heightCorrection: $topSpace - ($topSpace % $gridRowHeight);
  }
  
  $preventCollapse: 1;
  
  font-size: #{$fontSize}px;
  line-height: #{$lineHeight}px;
  transform: translateY(#{$typeOffset}em);
  padding-top: $preventCollapse;
 
  &::before {
    content: "";
    margin-top: #{-($heightCorrection + $preventCollapse)}px;
    display: block;
    height: 0;
  }
}

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

$baseFontSize: Это стандартный размер шрифта в нашей системе, вокруг которого будет выстраиваться всё остальное. Мы установим 16px как значение по умолчанию.
$typeSizeModifier: Это коэффициент, применяемый к свойству font-size, который устанавливает правило размера шрифта. Например, если применить значение 2 к нашему стандартному размеру шрифта в 16px, то значение font-size будет равняться 32px.
$descenderHeightScale: Это высота нижнего выносного элемента, выраженная в пропорции. Для шрифта Lato она составляет приблизительно 0,11.
$capHeight: Это высота верхнего выносного элемента, выраженная в пропорции. Для шрифта Lato она равна примерно 0,75.
$gridRowHeight: Системы вёрстки обычно опираются на вертикальный ритм, установленный по умолчанию, чтобы сделать процесс чтения приятным и равномерным. Например, все элементы страницы могут быть равноудалены друг от друга на величины, кратные четырём или пяти пикселям. Мы будем использовать значение 4, потому что оно хорошо делится на наш $baseFontSize, составляющий 16px.
$typeRowSpan: Как и $typeSizeModifier, эта переменная служит коэффициентом для высоты ряда сетки и устанавливает правило высоты строки. Если по умолчанию величина ряда сетки равна 4, а в $typeRowSpan мы установим 8, то высота строки составит 32px.

Теперь мы можем вставить эти цифры в формулу Basekick, приведенную выше (с помощью функций и примесей SCSS). И это даст нам следующий результат:

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

Как реализовать межстрочный интервал HTML

Вы можете управлять междустрочным интервалом абзаца с помощью style=line-height. Используйте атрибут style со следующими значениями:

line-height: normal|number|length|initial|inherit;

Ниже приведен пример HTML-кода, который выводит абзацы с различными междустрочными интервалами:

<!Doctype html><html><head><title>Установка междустрочного интервала с помощью атрибута Style</title></head>
<body>
<p style=”line-height:1.5; text-align:justify”>В этом параграфе используются два значения для атрибута style. Первый line-height:1.5 определяет полуторный междустрочный интервал для абзаца, а второе значение text-align:justify определяет, что текст абзаца должен распределяться по ширине. </p>
<p style=”line-height:2; text-align:justify”>Этот абзац имеет двойной междустрочный интервал и выровнен по ширине. line-height:2 определяет двойной интервал. Атрибут style не обязательно должен иметь два значения. Но если вам нужно задать два значения, вы можете сделать это, разделив их точкой с запятой. </p>
</body>
</html>

line-heightstyle

<p style=”line-height: 13px”>: Устанавливает межстрочный интервал 13 пикселей; <p style=”line-height:200%”>: Устанавливает в HTML расстояние между абзацами в 200% относительно текущего размера шрифта; <p style=”line-height:14px”>: Устанавливает высоту строки 14 пикселей.

Установка междустрочного интервала

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

В CSS за междустрочный интервал (интерлиньяж) отвечает свойство line-height (высота строки). Чем выше значение этого свойства, тем больше промежуток между строками.

Обращаю Ваше внимание на то, что при установке значения высоты строки с использованием единиц измерения пиксели, размер междустрочного интервала, напрямую будет зависеть от размера шрифта, то есть он будет автоматически корректироваться пропорционально изменению свойства font-size (размер шрифта), рассмотренного в предыдущей статье. Как правило, во всех современных браузерах высота строки по умолчанию составляет 120 %

Как правило, во всех современных браузерах высота строки по умолчанию составляет 120 %.

Расчёт междустрочного интервала происходит следующим образом:

высота строки (line-height) минус высота шрифта (font-size)

Например, размер шрифта составляет 20 пикселей, а высота строки 150% (30 пикселей). Таким образом, получается:

высота строки (150% или 30px) минус высота шрифта (20px) = 10px

Допускается задавать размер высоты строки с использованием числового значения. Объявление выглядит следующим образом:

cелектор {
line-height : 1.5;
}

Как вы можете заметить, единицы измерения при этом не указываются, а число выступает в роли множителя. При использовании числовых значений расчёт междустрочного интервала происходит следующим образом:

Числовое значение * размер шрифта

Например, шрифт для абзаца установлен 2em, а высота строки задана как 1.5:

p {
font-size : 2em;
line-height : 1.5;
}

Расчетное значение междустрочного интервала в нашем случае составит 3em:

Числовое значение(1.5) * размер шрифта(2em) = 3em

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример использование свойства line-height</title>
<style> 
.test {
line-height: 10px; /* задаём высоту строки в пикселях. */
}
.test2 {
line-height: normal; /* задаём высоту строки (значение по умолчанию). */
}
.test3 {
line-height: 150%; /* задаём высоту строки в процентах от текущего размера шрифта. */
}
.test4 {
line-height: 2; /* задаём высоту строки числом, которое будет умножаться с текущим размером шрифта. */
}
</style>
</head>
	<body>
		<p class = "test">Параграф в котором line-height: 10px<br>Параграф в котором line-height: 10px</p>
		<p class = "test2">Параграф в котором line-height: normal<br>Параграф в котором line-height: normal</p>
		<p class = "test3">Параграф в котором line-height: 150%<br>Параграф в котором line-height: 150%</p>
		<p class = "test4">Параграф в котором line-height: 2<br>Параграф в котором line-height: 2</p>
	</body>
</html>

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

Результат нашего примера:

Рис. 62 Пример использование свойства line-height (установка междустрочного интервала).

Отступ текста сверху, снизу и от края – знакомьтесь 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.

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

Изменение межстрочного интервала в списках

Иногда возникает задача изменить межстрочные интервалы в списках

. Предыдущие методы не приведут к нужному результату, однако есть одно свойство, которое может изменить интервал в списке — это свойство — margin. Данное стилевое свойство может быть как с положительным, так и отрицательным значением. Покажем изменение межстрочного интервала в списке на примере:

Пункт 1

Пункт 2

Пункт 3

Для увеличения отступов нужно в CSS-файле прописать следующие строки:

margin-top: 10px;

Таким образом мы указали, что расстояние от каждого пункта списка увеличивается на 10 пикселей. Причем в данном случае возможно и отрицательное значение. Таким образом, мы можем задать: — margin-top: -15px.

Свойство HTML margin
используется для добавления отступа или разрыва между различными элементами. Свойство padding
используется для добавления пространства между содержимым и границей (рамкой
) указанного HTML-элемента
.

Разницу между полем и отступом можно увидеть на следующем рисунке:

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

Посмотреть демо-версию и код

У нас есть три элемента div
. Первые два — со свойством HTML margin
, а третий — со свойством padding
. Расстояние между элементами div
— это margin
, а пространство между текстом внутри третьего элемента div
и линией его границы — это padding
.

Синтаксис CSS padding и margin

Синтаксис, который используется для единичного объявления свойства CSS margin
:

Этот код задает отступы во всех направлениях: сверху, снизу, слева и справа. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:

margin: 10px 20px 50px 100px;

10px
— отступ сверху;
20px
— отступ справа;
30px
— отступ снизу;
40px
— отступ слева.

Также можно установить margin left HTML
и другие направления отдельно:

Примечание:
Можно использовать для определения отступа px
, pts
, cm
и т.д.

Синтаксис свойства CSS padding

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

Единичное объявление с одним значением:

Для каждого направления одиночным объявлением:

padding: 10px 20px 50px 100px;

Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin
.

Для каждого направления в отдельности:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Пример для установки полей и отступов в HTML-списке

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

Список задается и другими свойствами CSS
, но без использования свойств HTML margin
и padding
он будет выглядеть так:

Посмотреть демо-версию и код

Добавив поля 10px
для ссылок внутри

Горизонтальное и вертикальное выравнивание

В большинстве случаев при работе с таблицами вам придется настраивать выравнивание содержимого внутри заголовочных ячеек и ячеек данных. Свойство text-align применяется для горизонтального выравнивания по аналогии с любой текстовой информацией. Применение этого свойства для текста мы рассматривали ранее в статье «Форматирование текста в CSS».

Чтобы установить выравнивание для содержимого в ячейках, необходимо использовать специальные ключевые слова со свойством text-align. Рассмотрим применение ключевых слов этого свойства на следующем примере.

<!DOCTYPE html>
<html>
<head>
	<title>Пример горизонтального выравнивания в таблице</title>
<style> 
table {
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
}
.left {
text-align: left; /* выравнивает текст ячейки влево */
}
.right {
text-align: right; /* выравнивает текст ячейки вправо */
}
.center {
text-align: center; /* выравнивает текст ячейки по центру */
}
.justify {
text-align: justify; /* выравнивает текст ячейки по ширине */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>Значение</th><th>Описание</th>
			</tr>
			<tr class = "left">
				<td>left</td><td>Выравнивает текст ячейки влево. Это значение по умолчанию (если направление текста слева направо).</td>
			</tr>
			<tr class = "right">
				<td>right</td><td>Выравнивает текст ячейки вправо. Это значение по умолчанию (если направление текста справа налево).</td>
			</tr>
			<tr class = "center">
				<td>center</td><td>Выравнивает текст ячейки по центру.</td>
			</tr>
			<tr class = "justify">
				<td>justify</td><td>Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст ячейки по ширине).</td>
			</tr>
		</table>
	</body>
</html>

В этом примере мы создали четыре класса, которые задают различное горизонтальное выравнивание в ячейках и применили их по порядку к строкам таблицы. Значение в ячейке соответствует значению свойства text-align, которое было применено к этой строке.

Результат нашего примера:

Рис. 149 Пример горизонтального выравнивания в таблице.

Кроме горизонтального выравнивания вы также можете определить и вертикальное выравнивание в ячейках таблицы с помощью свойства vertical-align.

Обращаю Ваше внимание, что при работе с ячейками таблицы применяются только следующие значения* этого свойства:

Значение	Описание
baseline	Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.
top	Выравнивает содержимое ячейки вертикально по верхнему краю.
middle	Выравнивает содержимое ячейки вертикально по середине.
bottom	Выравнивает содержимое ячейки вертикально по нижнему краю.

* — Значения sub, super, text-top, text-bottom, length и %, примененные к ячейке таблицы будут вести себя как при использовании значения baseline.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<title>Пример вертикального выравнивания в таблице</title>
<style> 
table {
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
height: 55px; /* задаем высоту ячеек */
}
.baseline {
vertical-align: baseline; /* выравнивает базовую линию ячейки по базовой линии родителя */
}
.top {
vertical-align: top; /* выравнивает содержимое ячейки вертикально по верхнему краю */
}
.middle {
vertical-align: middle; /* выравнивает содержимое ячейки вертикально по середине */
}
.bottom {
vertical-align: bottom; /* выравнивает содержимое ячейки вертикально по нижнему краю */
}
</style>
</head>
	<body>
		<table> 
			<tr>
				<th>Значение</th><th>Описание</th>
			</tr>
			<tr class = "baseline"> 
				<td>baseline</td><td>Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.</td>
			</tr>
			<tr class = "top"> 
				<td>top</td><td>Выравнивает содержимое ячейки вертикально по верхнему краю.</td>
			</tr>
			<tr class = "middle"> 
				<td>middle</td><td>Выравнивает содержимое ячейки вертикально по середине.</td>
			</tr>
			<tr class = "bottom"> 
				<td>bottom</td><td>Выравнивает содержимое ячейки вертикально по нижнему краю.</td>
			</tr>
		</table> 
	</body>
</html>

В этом примере мы создали четыре класса, которые задают различное вертикальное выравнивание в ячейках и применили их по порядку к строкам таблицы. Значение в ячейке соответствует значению свойства vertical-align, которое было применено к этой строке.

Рис. 150 Пример вертикального выравнивания в таблице.

inline-block

Значит, inline-block — представляет собой этакую «коробочку», в которой содержатся буковки, т.е. некий коробок со спичками. Этот коробок представляет из себя блок, с поведением строки, т.е. по сути является строчно-блочным элементом.
Строчное поведение inline-block позволяет ему оставаться в одной строке с другими строчными элементами, например <span>-ом или попусту сливаться с обычными буквами, т.е. вести себя, как текст в строке. Ну а благодаря своим блочным способностям, inline-block-у можно смело задавать любые свойства, которые присущи блочным элементам: ширину, высоту, верхний и нижний margin, например, уже будет действовать, как у блоков.
Ну и т.д., в общем, эдакий «блок-строка»

Как видно из примера, inline-block чувствует высоту и ширину, которую мы ему прописали. Так же можно заметить одну интересную штуку, наш подопечный выровнялся по вертикали, выровнялся так, как и должны выравниваться большинство инлайн-элементов в html, т.е. по базовой линии (baseline) , т.е. выравнивается наш блок относительно своего текста, который в нём находится. Добавляем текста в блок и смотрим результат.

Блок выровнялся по базовой линии. Чего и следовало ожидать.
Сразу же приведу несколько разных примеров, поведения inline-block с разным вертикальным выравниванием.

Тут я продемонстрировал три разных выравнивания, но на самом деле их намного больше, если интересно, то вот здесь описаны все возможные варианты. В данной статье нет смысла всех их описывать. Просто учитывайте это, при работе с inline-block.

inline-block — как буква

Одна из главных вещей, которые вы должны знать, это то, что наш ~~коробок со спичками~~ inline-block — является по сути обычной буквой — символом, т.е. весь наш строчный блок составляет всего лишь одну букву в строке, одну единицу. Даже не смотря на то, что содержит в себе кучу других символов или элементов. Именно по этой причине inline-block не «разрываются», как строчные элементы, а переносятся на следующую строку целиком. Ну и соответственно, если рядом с inline-block не будет пробелов, то расстояние между ним и соседними буквами будет обычный межбуквенный интервал (трекинг), которым можно управлять (кернинг). Если есть пробелы — до соседней буквы будет этот же интервал плюс ширина пробела.

Переваривайте эту информацию и идёмте дальше…