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

Чтобы изменить расстояние между строками в HTML, вам не нужно забивать шпоны. Вам нужно всего лишь к объекту, в котором вы хотите это расстояние отрегулировать, например, к абзацу текста (тег <p></p>) или к блочному элементу (<div></div>), применить CSS-свойство line-height. Свойство может применяться ко всем тегам HTML.

Значение у line-height можно задавать в процентах, множителем, единицами измерения (пиксели (px), пункты (pt), пайки (pc) и т.д.), а также оно может принимать значение normal и inherit.

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

Черкнем несколько строк на HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>line-height</title>
<style>
h1 {
ine-height: 70%;
}
p {
line-height: 1;
}
</style>
</head>
<body>
<div>
<h1>Заголовок</h1>
<p>Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать.</p>
</div>
</body>
</html>

Вот так выглядит в браузере расстояние между строками в абзаце со значением 1 (т.е. одинарный интерлиньяж) и 70% у заголовка (заметьте что при расчете в % за 100% берется высота шрифта):

Если мы зададим line-height для тега <div>, окутывающего и заголовок, и абзац, а у них, соответственно, это свойство уберем, то получится:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>line-height</title>
<style>

div {
line-height: 1.5;
}

</style>
</head>
<body>
<div>
<h1>Заголовок</h1>
<p>Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать. Вы только что начали читать предложение, которое сейчас заканчиваете читать.</p>
</div>
</body>
</html>

Если мы поставим line-height = 0.4, получится экспонат отрицательного интерлиньяжа:

Зачем же вообще с расстоянием между строками что-то делают? Из-за вредности? От нечего делать?

Отнюдь.

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

Интерлиньяж

Метки:

текст

Расстояние между базовыми линиями строк текста. Складывается из размера шрифта и межстрочным расстоянием. На рис. 1 показана базовая линия текста и расстояние между ними.

Рис. 1. Интерлиньяж

На веб-странице интерлиньяж вычисляется браузером автоматически в зависимости от размера и типа шрифта. Также значение интерлиньяжа можно установить самостоятельно с помощью стилевого атрибута line-height или font.

В качестве значения line-height можно использовать множитель, процентную запись или точное значение, заданное в любых единицах принятых в CSS — пиксели (px), дюймы (in), пункты (pt) и др. В примере 1 показана установка интерлиньяжа в пикселах.

Пример 1. Использование line-height

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Интерлиньяж</title>
  <style type="text/css">
   DIV {
    line-height: 30px;
   }
  </style>
 </head>
 <body>
  <div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
   volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
   ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo 
   consequat.
  </div>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Значение интерлиньяжа установлено как 30 пикселов

Любое число больше нуля у аргумента line-height воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. Разрешается использовать процентную запись, в этом случае за 100% берется высота шрифта.

Аналогично можно установить интерлиньяж с помощью стилевого параметра font, задавая ему три аргумента: размер шрифта, межстрочное расстояние и гарнитуру, как показано в примере 2.

Пример 2. Использование font

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Интерлиньяж</title>
  <style type="text/css">
   P {
    font: 11pt/16pt sans-serif;
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
  sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna 
  aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud 
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea 
  commodo consequat.</p>
 </body>
</html>

В данном примере задан рубленый шрифт (sans-serif), размер его установлен 11 пунктов, а интерлиньяж — 16 пунктов. Обратите внимание, что эти два параметра пишутся через слэш (/). Результат примера показан на рис. 3.

Рис. 3. Значение интерлиньяжа установлено как 16 пунктов

8 простых способов улучшить типографику в вашем дизайне перевод

Веб-разработка*

Множество людей, включая дизайнеров, думают, что типографика – это только выбор гарнитуры, размера шрифта и того, должен ли он быть нормальным или полужирным. Для большинства людей на этом все и заканчивается. Но для получения хорошей типографики нужно гораздо больше и как правило это детали, которые дизайнеры часто игнорируют.
Эти детали дают дизайнеру полный контроль, позволяет ему создавать прекрасные и последовательные с точки зрения типографики решения в дизайне. Хотя все это применимо для различных типов носителей, в этой статье мы сосредоточимся на том, как их применить к веб-дизайну с использованием CSS. Вот 8 простых путей с помощью CSS улучшить типографику и, следовательно, общее удобство дизайна.

1. Размеры

Размер наборной строки. Для глаза читателя, длинные или короткие строки утомительны. Длинные – разрушают ритм, так как читателю трудно найти следующую строку текста. Единственная ситуация, в которой приемлемы короткие строки – малое количество текста. Для наилучшей читабельности длина строки должна быть между 40 и 80 символами, включая пробелы. Для дизайна с одной колонки текста 65 символов – идеальны.

Простой способ вычислить длину строки – использовать метод Роберта Брингхарста (Robert Bringhurst’s), который умножает размер шрифта на 30. То есть, если размер шрифта 10px, умножая его на 30 получим 300px или, приблизительно, 65 символов в строке. Код будет выглядеть приблизительно как:
p { font-size: 10px; max-width: 300px; }
Я использую px так как это значительно упрощает расчеты, но можно использовать и em.

2. Интерлиньяж

Интерлиньяж это пространство между строками текста в теле заметки и оно играет большую роль для читабельности. Правильное разделение строк, позволяет читателю проще следить за строкой и улучшает внешний вид текста. Интерлиньяж так же изменяет типографический цвет текста, который является плотностью или же тоном композиции.
На интерлиньяж влияет множество факторов: гарнитура, размер шрифта, его полнота, обстоятельства(?), длина строки, расстояние между словами и т.д. Чем длиннее строка, тем больше интерлиньяж. Чем больше размер шрифта, тем меньше интерлиньяж. Хорошее правило – устанавливать интерлиньяж на 2-5pt больше, чем размер шрифта, в зависимости от гарнитуры. Так что если шрифт 12pt, то для веб интерлиньяж должен быть в 15pt или 16pt.

Определение верного интерлиньяжа требует определенной ловкости, но ниже приведен пример того, на что должен быть похож ваш код:
body { font-family: Helvetica, sans-serif; font-size: 12px; line-height: 16px; }

3. Обработка кавычек

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

Это легко достигается с помощью CSS, используя элемент blockquote:
blockquote { text-indent: -0.8em; font-size: 12px; }

Отрицательный отступ будет зависеть от гарнитуры, размера шрифта и полей.

4. Вертикальный ритм

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

Для того что бы поддерживать вертикальный ритм с помощью CSS, нужно, что бы расстояние между элементами и межстрочное расстояние (интерлиньяж) был равен размеру сетки базовых линий. Допустим, вы используете 15px сетку базовых линий, подразумевая, что между каждой линией сетки 15px. Интерлиньяж будет 15px и расстояние между параграфами тоже будет 15px. Вот пример:
body { font-family: Helvetica, sans-serif; font-size: 12px; line-height: 15px; }


p {

margin-bottom: 15px;

}

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

5. Верхние и нижние висячие строки

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

К несчастью, нет простого способа предотвратить висячие строки с помощью CSS. Один из способов от них избавится был описан выше, еще один — jQWidon’t, плагин для jQuery, который размещает неразрывные пробелы между последними двумя словами элемента.

6. Выделение

Важно выделять слова не отвлекая читателя. Курсивное начертание часто рассматривается как идеальная форма выделения. Некоторые другие распространенные формы выделения: полужирное начертание, заглавные буквы, капитель, размер шрифта, цвет, подчеркивание или другая гарнитура. Не важно, какой вы воспользуетесь, постарайтесь использовать только одну. Такие комбинации как капитель – полужирное – курсивное начертание отвлекают и смотрятся неуклюже.

Вот несколько способов выделения с помощью CSS:
span { font-style: italic; }


h1 {

font-weight: bold;

}
h2 {

text-transform: uppercase;

}
b {

font-variant: small-caps;

}

Имейте в виду, что font-variant работает только в случае, если шрифт поддерживает капитель.

7. Масштаб

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

Пример типографического масштаба определенного в CSS:
h1 { font-size: 48px; }


h2 {

font-size: 36px;

}
h3 {

font-size: 24px;

}
h4 {

font-size: 21px;

}
h5 {

font-size: 18px;

}
h6 {

font-size: 16px;

}
p {

font-size: 14px;

}

8. Подчищаем рваные края

Когда создается блок текста с выравниванием по левому или правому краю, не забудьте подчистить рваные края (неровные строки) и сбалансировать текст без всяких неожиданных «дыр» или неуклюжих форм текстовых блоков. Рваные края могут отвлекать читателя. Хороший край «мягкий», равномерный, без слишком длинных, или слишком коротких строк. Нельзя контролировать это с помощью CSS, так что для получения хороших краев надо вносить в текст ручные правки.

Можно улучшить края с помощью переносов, но к сожалению CSS тут бессилен. Возможно, в «ближайшем» будущем CSS3 обеспечит некоторый контроль… Но несмотря на это – не все потеряно. Есть ряд решений на стороне сервера и на стороне клиента, которые осуществляют автоматическую расстановку переносов. Например phpHyphenator, Hyphenator или online генераторы.

Hyphenator.js это Javascript-библиотека которая осуществляет автоматическую расстановку переносов на стороне клиента.

Ресурсы для дальнейшего изучения

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

Five Simple Steps to Better Typography
Mark Boulton
Incremental Leading
Mark Boulton
Compose to a Vertical Rhythm
Richard Rutter — 24 Ways
Setting Type on the Web to a Baseline Grid
Wilson Minor — A List Apart
Setting Web Type to a Baseline Grid
Craig Grannell — Opera
The Elements of Typographic Style Applied to the Web
Robert Bringhurst
How to Size Text in CSS
Richard Rutter — A List Apart
Baseline Rhythm Calculator
Geoffrey Grosenbach
Detail In Typography
Jost Hochuli
The Elements of Typographic Style
Robert Bringhurst
Thinking with Type
Ellen Lupton
Grid Systems in Graphic Design
Josef Müller-Brockmann

Источник

I want to decrease the vertical spacing between header and paragraph.

<td style="width:427px;">
  <h2 style="color:#156CA4">Quotation</h2>
  <p style="color:#00A651">abc Technologies Pvt Ltd</p>
</td>

asked Jan 20, 2016 at 11:42

krishna mohankrishna mohan

8854 gold badges18 silver badges38 bronze badges

Try adjusting the line height property using CSS. I would recommend giving it an id though if you only want it to affect this p tag in particular

p {
    line-height: 0px;
}

There is also the possibility of negative margins (which isn’t considered best practice, but will work in your case):

p {
    margin-top:-5px;
}

answered Jan 20, 2016 at 11:46

You have to remove the margin from both h2 and p.

    h2{
      margin-bottom: 0;
    }
    p{
      margin-top: 0;
    }

here is a jsfiddle to see the results

Carewen

1332 silver badges14 bronze badges

answered Jan 20, 2016 at 11:57

HampusHampus

2372 silver badges7 bronze badges

Simple use following css will remove default all padding and margin. Because here h2 use default spacing.

*{
  margin:0;
  padding:0;
}

Previous result:

New working Result:

Working Fiddle

answered Jan 20, 2016 at 11:49

ketanketan

18.9k42 gold badges60 silver badges94 bronze badges

Use margin-bottom style inside h2

margin-bottom:-10px;

To decrease space we should use values in negative.

answered Jan 20, 2016 at 11:50

Gugan AbuGugan Abu

5361 gold badge4 silver badges17 bronze badges

Add this style below your html, i thing it can be usefull

<style>
    h2, p {
       margin: 0;
    }
</style>

answered Jan 20, 2016 at 11:57

Use the Adjacent sibling combinator

h2 + p {
    margin-top: 0;
}

Which makes paragraphs that immediately follow an H2 headline have a top margin of 0.

You may also have to alter the bottom margin of the headline.

answered Jun 10, 2021 at 14:33

TwiliteTwilite

8738 silver badges22 bronze badges

I faced the same issue. Setting Line height on the p and all heading tag works for me.

h1,h2,h3,h4,h5,h6,p{
   margin: 0;  // if there is margin
   padding:0;  // if there is padding
  line-height: 0px !important; // you should set line height according to your requirement.
}

This will affect all children’s components.

answered Sep 9, 2022 at 12:05

Источник

I want to decrease the vertical spacing between header and paragraph.

<td style="width:427px;">
  <h2 style="color:#156CA4">Quotation</h2>
  <p style="color:#00A651">abc Technologies Pvt Ltd</p>
</td>

asked Jan 20, 2016 at 11:42

krishna mohankrishna mohan

8854 gold badges18 silver badges38 bronze badges

Try adjusting the line height property using CSS. I would recommend giving it an id though if you only want it to affect this p tag in particular

p {
    line-height: 0px;
}

There is also the possibility of negative margins (which isn’t considered best practice, but will work in your case):

p {
    margin-top:-5px;
}

answered Jan 20, 2016 at 11:46

You have to remove the margin from both h2 and p.

    h2{
      margin-bottom: 0;
    }
    p{
      margin-top: 0;
    }

here is a jsfiddle to see the results

Carewen

1332 silver badges14 bronze badges

answered Jan 20, 2016 at 11:57

HampusHampus

2372 silver badges7 bronze badges

Simple use following css will remove default all padding and margin. Because here h2 use default spacing.

*{
  margin:0;
  padding:0;
}

Previous result:

New working Result:

Working Fiddle

answered Jan 20, 2016 at 11:49

ketanketan

18.9k42 gold badges60 silver badges94 bronze badges

Use margin-bottom style inside h2

margin-bottom:-10px;

To decrease space we should use values in negative.

answered Jan 20, 2016 at 11:50

Gugan AbuGugan Abu

5361 gold badge4 silver badges17 bronze badges

Add this style below your html, i thing it can be usefull

<style>
    h2, p {
       margin: 0;
    }
</style>

answered Jan 20, 2016 at 11:57

Use the Adjacent sibling combinator

h2 + p {
    margin-top: 0;
}

Which makes paragraphs that immediately follow an H2 headline have a top margin of 0.

You may also have to alter the bottom margin of the headline.

answered Jun 10, 2021 at 14:33

TwiliteTwilite

8738 silver badges22 bronze badges

I faced the same issue. Setting Line height on the p and all heading tag works for me.

h1,h2,h3,h4,h5,h6,p{
   margin: 0;  // if there is margin
   padding:0;  // if there is padding
  line-height: 0px !important; // you should set line height according to your requirement.
}

This will affect all children’s components.

answered Sep 9, 2022 at 12:05

Источник

1. Основной текст

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

На основе размера шрифта и интерлиньяжа вычисляется основная константа типографики — шаг вертикального ритма.

Для основного текста я взял условный sans-serif размером 16px и line-height: 1.5, чтобы высота строки для удобства расчетов равнялась целому числу пикселей — 24px.

css:

body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

↓

less:

@fz: 16px;
@rythm: 24px;
@font1: sans-serif;
@lh: unit(@rythm / @fz);

body {
  font-family: @font1;
  font-size: @fz;
  line-height: @lh;
}

Уделите особое внимание основному тексту, так как такого текста больше всего на информационном сайте.

Главный критерий — текст должен легко читаться. Для этого он должен быть достаточно крупным.

Выбирайте размер от 14px до 25px. Если текста будет много, шрифт рекомендуется выбирать не меньше 16px.

Высота строки из диапазона 1.2–1.8.
Меньше 1.4, чтобы блоки текста создавали плотные контрастные прямоугольники. Больше 1.6, чтобы добиться визуальной легкости.

2. Абзацы

Основной текст обычно состоит из абзацев. Выберем расстояние между абзацами равное вертикальному ритму.

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

Рекомендуемая максимальная длина строки текста должна быть в пределах 60–90 символов.

Слишком длинные строки утомительно читать, потому что глазу тяжелее находить начало строки.

css:

p {
  margin: 0 0 1.5em;
  max-width: 40em;
}

↓

less:

@linel: 40em;

p {
  margin: 0 0 unit(@rythm / @fz, em);
  max-width: @linel;
}

3. Обтекание картинок

Первоисточник: https://css-tricks.com/minimum-paragraph-widths/

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

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

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

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

p:before,
ol:not([class]):before,
ul:not([class]):before {
    content: '';
    display: block;
    width: 10em;
    overflow: hidden;
}

li p:before {
    content: none;
}

4. Заголовки. Размер

Заголовки должны обладать контрастом по отношению к основному тексту, тогда читатель беглым взглядом без труда сможет определить иерархию документа по заголовкам. Создать контраст можно при помощи шрифта, размера текста, отступов и цвета.

Для информационных сайтов обычно хватает четырех типов заголовка h1 .. h4. Заголовки h5 и h6 почти не используются. Поэтому для h1 .. h4 создадим контраст при помощи размера, а h5 и h6 оставим на потом.

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

Сайты, на которых можно подобрать размеры шрифта по классическим типографским пропорциям:

http://type-scale.com/
http://www.modularscale.com/
http://www.gridlover.net/app/

Для адаптивной типографики нам понадобится как минимум два набора размеров заголовков. Для больших экранов самый крупный заголовок может быть больше основного текста в 3-4 раза. Для маленьких экранов это соотношение рекомендуется делать не больше 2х. Иначе на узких экранах мобильных устройств, где длина строки составляет 30-40 символов, заголовки будут занимать слишком много строк, отъедая ценное вертикальное пространство, могут появиться проблемы с переносами длинных слов.

Иллюстрация с сайта http://typecast.com/blog/a-more-modern-scale-for-web-typography

Поэтому для малых экранов выберем соотношение 1.125

1.125 — Major Second

А для экранов больше 768px шириной выберем контраст повыше — 1.250

1.250 — Major Third

Значение 768px выбрано потому, что с этой ширины экрана начинаются типичные планшеты (iPad в портретной ориентации).

less:

@scale1: 1.125;
@scale2: 1.250;
@breakpoint: ~"(min-width: 768px)";

  h1 { font-size: round(@fz * pow(@scale1, 4)); }
  h2 { font-size: round(@fz * pow(@scale1, 3)); }
  h3 { font-size: round(@fz * pow(@scale1, 2)); }
  h4 { font-size: round(@fz * @scale1); }

@media @breakpoint {
  h1 { font-size: round(@fz * pow(@scale2, 4)); }
  h2 { font-size: round(@fz * pow(@scale2, 3)); }
  h3 { font-size: round(@fz * pow(@scale2, 2)); }
  h4 { font-size: round(@fz * @scale1); }
}

Получим:

Paragraph text

4. Заголовки. Межстрочное расстояние

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

h1 { line-height: 1.1; }
h2 { line-height: 1.2; }
h3 { line-height: 1.3; }
h4 { line-height: 1.4; }

4. Заголовки. Отступы

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

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

Верхний отступ должен быть больше, чем нижний. Чем выше уровень заголовка, тем больше отступ. У h1 верхний отступ больше, чем у h4. Пустое пространство между разделами помогает увидеть иерархию в структуре контента.

//calculations for small screens
@fzh1: round(@fz * pow(@scale1, 4));
@fzh2: round(@fz * pow(@scale1, 3));
@fzh3: round(@fz * pow(@scale1, 2));
@fzh4: round(@fz * pow(@scale1, 1));

h1 {
  font-size: @fzh1;
  line-height: 1.1;
  margin-top: 4em;
  margin-bottom: unit( @lh * @fz / @fzh1, em);
}

h2 {
  font-size: @fzh2;
  line-height: 1.2;
  margin-top: 3.5em;
  margin-bottom: unit( @lh * @fz / @fzh2, em);
}

h3 {
  font-size: @fzh3;
  line-height: 1.3;
  margin-top: 3em;
  margin-bottom: unit( @lh * @fz / @fzh3, em);
}

h4 {
  font-size: @fzh4;
  line-height: 1.4;
  margin-top: 2.5em;
  margin-bottom: unit( @lh * @fz / @fzh4, em);
}

//calculations for large screens
@fzh1-l: round(@fz * pow(@scale2, 4));
@fzh2-l: round(@fz * pow(@scale2, 3));
@fzh3-l: round(@fz * pow(@scale2, 2));
@fzh4-l: round(@fz * pow(@scale2, 1));

@media @breakpoint {
  h1 {
    font-size: @fzh1-l;
    margin-bottom: unit( @lh * @fz / @fzh1-l, em);
  }

  h2 {
    font-size: @fzh2-l;
    margin-bottom: unit( @lh * @fz / @fzh2-l, em);
  }

  h3 {
    font-size: @fzh3-l;
    margin-bottom: unit( @lh * @fz / @fzh3-l, em);
  }

  h4 {
    font-size: @fzh4-l;
    margin-bottom: unit( @lh * @fz / @fzh4-l, em);
  }
}

При этом, если заголовок любого уровня является первым ребенком какого-либо контейнера (:first-child), верхний отступ заголовка должен быть обнулен. Отступ от верхней границы контейнера должен задаваться паддингом этого контейнера, а не маргином элемента внутри контейнера. Это позволяет избежать многих проблем, как, например, в случае с верхним отступом абзаца и многоколоночным текстом.

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}

Если после заголовка идет подзаголовок, а не абзац текста, то большой отступ между заголовками не нужен. В семантически правильном документе после заголовка h1 не может идти сразу h3, поэтому перечислим все правильные варианты для h2, h3 и h4 (потому что им мы задавали увеличенный верхний отступ).

/* double headers */
h1 + h2 { margin-top: 1.2em; }
h2 + h3 { margin-top: 1.3em; }
h3 + h4 { margin-top: 1.4em; }

Теперь вернемся к оформлению заголовков h5 и h6. H5 пусть выглядит как жирный основной текст.
H6 — уменьшенный размер шрифта, все буквы заглавные и немного разрежены. У обоих заголовков нижний отступ, как у абзаца, равен вертикальному ритму. А верхний отступ равен двойному вертикальному ритму.

@fzh5: @fz;
@fzh6: round(@fz * 0.8);

h5 {
  font-size: @fzh5;
  margin: unit( 2 * @lh * @fz / @fzh5, em) 0 unit( @lh * @fz / @fzh5, em);
}

h6 {
  font-size: @fzh6;
  margin: unit( 2 * @lh * @fz / @fzh6, em) 0 unit( @lh * @fz / @fzh6, em);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

Съешь ещё этих мягких французских булок да выпей чаю

Съешь ещё этих мягких французских булок да выпей чаю

Съешь ещё этих мягких французских булок да выпей чаю

Съешь ещё этих мягких французских булок да выпей чаю

Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства

Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства

Параграф текста.

5. Списки

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

ul:not([class]),
ol:not([class]) {
  margin: 0 0 unit(@lh, em);
  max-width: @linel;
}

Когда список обтекает картинку, случается такая ситуация:

Проблема: если список обтекает картинку, то маркеры списка налазят на картинку

Чтобы починить это, потребуется внести пару небольших изменений в стили списков: перенести дефолтный отступ в 2.5em с левой границы списка на правую, а сами элементы списка сдвинуть трансформом вправо на те же 2.5em.

ul:not([class]),
ol:not([class]) {
    margin: 0 0 unit(@lh, em);
    max-width: calc(@linel - 2.5em);
    padding-left: 0;

    ul,
    ol {
        margin-bottom: 0;
    }

    li {
        margin-right: 2.5em;
        transform: translateX(2.5em);
    }
}

Теперь буллиты не налазят на картинку:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo magnam natus saepe, maxime nam sed sunt veritatis atque repellendus.
Tenetur molestiae, voluptates eius in beatae! Velit veniam magni, deserunt impedit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Fuga et optio iure tempore, nulla perspiciatis sint, dolorem porro illum odio, accusamus, suscipit debitis voluptas? Dolores accusantium neque, tempore atque ducimus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Вложенным спискам мы обнулили нижний отступ. Протестируем вложенные списки:

Lorem ipsum dolor sit amet
Tenetur molestiae
1. Coffee
2. Milk
3. Tea
  1. green
  2. black
  3. white
Fuga et optio iure tempore
Dolores accusantium neque
ipsum
dolor
sit amet
Nemo magnam natus saepe
maxime nam sed sunt
Veritatis atque repellendus
Voluptates eius in beatae!

…

Magnam natus
Maxime nam sed
Atque repellendus

Lorem ipsum dolor sit amet
- Tenetur molestiae
- Fuga et optio iure tempore
- Dolores accusantium neque
  - ipsum
  - dolor
  - sit amet
Nemo magnam natus saepe
maxime nam sed sunt veritatis atque repellendus

6. Картинки

Всем картинкам ограничиваем максимальную ширину и обнуляем высоту, чтобы картинки масштабировались пропорционально.
Также переопределим vertical-align с baseline на bottom, чтобы под картинками не было отступа.

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

Картинки с подписью

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quo dolor aut aliquam officiis accusantium voluptates facilis magnam, excepturi velit suscipit. Provident, ex, quam. Fugit non maxime et minima commodi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quo dolor aut aliquam officiis accusantium voluptates facilis magnam, excepturi velit suscipit.

Tenetur molestiae, voluptates eius in beatae!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quo dolor aut aliquam officiis accusantium voluptates facilis magnam, excepturi velit suscipit.

Tenetur molestiae, voluptates eius in beatae!

7. Таблицы

Пример простой таблицы:

Optional table caption.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Пример таблицы, сгенерированной из Маркдауна:

	Express*	Personal PLUS	Personal MAX	Family
Main Features
Annual Load Limit	£ 300	£ 1,900	£ 12,000	£ 12,000
Maximum card balance	£ 300	£ 1,900	£ 5,000	£ 5,000
Reloadable		✔	✔	✔
Available at Store	✔	✔	✔	✔
Available online	✘	✔	✔	✔
UK ATM Access	✘	✔	✔	✔
International ATM Access	✘	✘	✔	✔
Money share	✘	✘	✔	✔
Shop anywhere	✔	✔	✔	✔
Receive free International minutes	✘	✔	✔	✔
Direct UK bank account loads	✘	✔	✔	✔
Pricing
NO transaction fee	✔	✔	✔	✔
Additional card	n/a	n/a	£ 5.00	£ 5.00
Card to card transfer	n/a	n/a	£ 1.00	FREE
International ATM access	n/a	n/a	£ 1.50	FREE
Foreign Exchange Charge	£ 1.95	£ 1.95	£ 1.95	FREE
In-Store Card Purchase fee	£ 6.95	£ 6.95	£ 6.95	£ 6.95
Monthly Cost	£ 3.95	£ 3.95	£ 3.95	£ 7.95
Card to card transfer	n/a	n/a	£ 1.00	FREE
International ATM access	n/a	n/a	£ 1.50	FREE
Foreign Exchange Charge	£ 1.95	£ 1.95	£ 1.95	FREE
In-Store Card Purchase fee	£ 6.95	£ 6.95	£ 6.95	£ 6.95
Monthly Cost	£ 3.95	£ 3.95	£ 3.95	£ 7.95

8. Цитаты

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

<blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Так как у цитат есть собственный padding, то последнему абзацу обнулим нижний отступ. Это сделает одинаковыми отступы до и после цитаты.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Цитата может быть большой и содержать внутри собственную логическую структуру, сопровождаться источником цитирования. Крупная цитата с форматированием внутри:

Header inside blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo magnam natus saepe, maxime nam sed sunt veritatis atque repellendus.

Nemo magnam natus saepe

maxime nam sed sunt

Veritatis atque repellendus

Voluptates eius in beatae!

Tenetur molestiae, voluptates eius in beatae! Velit veniam magni, deserunt impedit.

Подпись к цитате рекомендуется верстать так:

<blockquote>
  <p>Tenetur molestiae, voluptates eius in beatae! Velit veniam magni, deserunt impedit.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

…или так:

<blockquote>
  <p>Tenetur molestiae, voluptates eius in beatae! Velit veniam magni, deserunt impedit.</p>
  <cite>Source Title</cite>
</blockquote>

9. Списки определений

Пример списка определений:

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Код этого списка:

<dl>
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dt>Euismod</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

10. Код

Блок кода создается тегами:

<pre><code> code </code></pre>

Чтобы на узких экранах код было легче читать и не приходилось использовать горизонтальную прокрутку, для элемента pre установлен перенос по словам при помощи white-space: pre-wrap;.

11. Структурные теги article и section

В семантичном документе контент может быть разбит на разделы при помощи тегов section, и всё это может лежать внутри тега article. Создадим для этих тегов отступы со всех сторон равные 5vw. А если section внутри article, то обнулим эти отступы по бокам, у первой секции сверху и у последней секции снизу.

@section-pad: 5vw;

section:not([class]) {
    padding: @section-pad;
}

article:not([class]) {
    padding: @section-pad;

    & section:not([class]) {
        padding-left: 0;
        padding-right: 0;

        &:first-child {
            padding-top: 0;
        }

        &:last-child {
            padding-bottom: 0;
        }
    }
}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="bettertext.css">
</head>
<body>
    <article>
        <h1>Tenetur molestiae</h1>
        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    </article>
</body>
</html>

Источник

Здравствуйте, дорогие друзья!

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

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

Для задания межстрочного интервала в CSS существует специальное свойство line-height. Дословно оно переводится как высота строки.
Это CSS-свойство может принимать несколько значений:

1.Множитель (число).
Например:

line-height: 1.5;

Пример изменения межстрочного
интервала текста в HTML и СSS.

В данном примере мы получаем полуторный межстрочный интервал.
Здесь за единицу берётся размер шрифта. То есть если размер шрифта будет равен 16 пикселей, то межстрочный интервал со значением 2 будет равен:
2 x 16 = 32 пикселя.
2.Значение в пикселях или других единицах.
Например:

line-height: 20px;

Пример изменения межстрочного
интервала текста в HTML и СSS.

Так же вместо пикселей (px) можно использовать пункты (pt), высотe шрифта текущего элемента (em), дюймы(in) и так далее.
3.Значение в процентах.
Напрмер:

line-height: 180%;

Пример изменения межстрочного
интервала текста в HTML и СSS.

В этом случае за 100% берётся высота шрифта.
4.Inherit – значение межстрочного интервала будет наследоваться от родительского элемента.
Например:

line-height: inherit;

Пример изменения межстрочного
интервала текста в HTML и СSS.
5.Normal – в данном случае межстрочное расстояние задаётся автоматически.
Например:

line-height: normal;

Пример изменения межстрочного
интервала текста в HTML и СSS.

Лично мне больше всего нравится первый способ. Так как он прост и понятен в использовании и при этом интервал сохраняется при изменении размера шрифта.

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

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

1.Использовать атрибут style, внутри которого использовать то же свойство line-height с нужными нам параметрами.
Например:

<div style=” line—height:1.5;”>

Пример изменения межстрочного

интервала текста в HTML и СSS.

</div></li>
2.Использовать тег </style> и в нём уже для элемента с нужным классом задавать межстрочный интервал.
Например:

<style>

.block {

line-height: 120%;

}

</style>

<div class=”block”>

Пример изменения межстрочного

интервала текста в HTML и СSS.

</div>

В идеале тег style должен располагаться в теге , но работать он будет в любом месте страницы.

Использование межстрочного интервала в HTML и CSS для выравнивание по вертикали и задания отступов.

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

Ниже приведён пример заголовка без межстрочного интервала и с ним.

<h3 style=«line-height:0%;»>Межстрочный интервал равен 0%</h3>

<h3 style=«line-height:300%;»>Межстрочный интервал равен 300%</h3>

Межстрочный интервал равен 0%

Межстрочный интервал равен 300%

Таким образом, при помощи данного CSS свойства вы можете изменять межстрочный интервал в HTML и CSS коде, и таким образом делать оформление ваших сайтов более привлекательным.

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

Желаю вам успехов в оформлении ваших сайтов! До встречи в следующих статьях!

С уважением Юлия Гусарь

Подписаться на рассылку

Источник

25-03-2016, 16:47

Между заголовком и основным текстом слишком большой отступ — «Отступы и поля»

{include file=»engine/modules/saperu/context.php?data=

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Задача

Уменьшить расстояние между заголовком и идущим за ним текстом.

Решение

К абзацу (тег <p>) и заголовку (тег <h1>) автоматически добавляется
верхний и нижний отступы, которые в сумме дают большое расстояние между заголовком
и текстом. Чтобы уменьшить величину отступа надо добавить свойство margin-bottom к селектору H1. Причём можно установить положительное, нулевое или отрицательное
значение. Таким способом легко задавать желаемое значение отступа (пример 1).

Пример 1. Использование отрицательных отступов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Расстояние между строками</title>
  <style>
   h1 {
    margin-bottom: -15px; /* Отрицательный отступ между заголовком и текстом */
   }
  </style>
 </head>
 <body>
   <h1>Апплет</h1>
   <p>Программа, которая выполняется с составе браузера или под управлением 
   специальной программы для её просмотра. Апплет, как правило, пишется на
   языке Java, поэтому часто можно встретить сочетание &laquo;Java 
   апплет&raquo;.</p>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Расстояние между заголовком и основным текстом

В данном примере для селектора H1 устанавливается отрицательное значение нижнего отступа, за счёт этого на 15 пикселов уменьшается расстояние между заголовком и нижележащим абзацем.

«}

Комментариев: 0: 25-03-2016, 16:47

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Еще новости по теме:

Другие новости по теме:

Источник

Интерлиньяж

8 простых способов улучшить типографику в вашем дизайне перевод

1. Размеры

2. Интерлиньяж

3. Обработка кавычек

4. Вертикальный ритм

5. Верхние и нижние висячие строки

6. Выделение

7. Масштаб

8. Подчищаем рваные края

Ресурсы для дальнейшего изучения

1. Основной текст

2. Абзацы

3. Обтекание картинок

4. Заголовки. Размер

4. Заголовки. Межстрочное расстояние

4. Заголовки. Отступы

Съешь ещё этих мягких французских булок да выпей чаю

Съешь ещё этих мягких французских булок да выпей чаю

Съешь ещё этих мягких французских булок да выпей чаю

Съешь ещё этих мягких французских булок да выпей чаю

Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства

Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства

5. Списки

6. Картинки

7. Таблицы

8. Цитаты

Header inside blockquote

9. Списки определений

10. Код

11. Структурные теги article и section

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

Использование межстрочного интервала в HTML и CSS для выравнивание по вертикали и задания отступов.

Межстрочный интервал равен 0%

Межстрочный интервал равен 300%

Читайте также:

Подписаться на рассылку

Между заголовком и основным текстом слишком большой отступ — «Отступы и поля»

Задача

Решение