Хорошо веб-дизайн часто о хорошей типографике. Поскольку большая часть содержимого веб-страницы представлена в виде текста, умение стилизовать этот текст так, чтобы он был привлекательным и эффективным, является важным навыком, которым должен обладать веб-дизайнер. К сожалению, у нас нет такого же уровня типографского контроля в Интернете, как в печати. Это означает, что мы не всегда можем надежно стилизовать текст на веб-сайте так же, как мы могли бы сделать это в печатном виде.
Один общий стиль абзаца, который вы часто видите в печати (и который мы можем воссоздать в Интернете), - это когда первая строка этого абзаца имеет отступ. пространство табуляции. Это позволяет читателям видеть, где начинается один абзац и заканчивается другой.
Вы не так часто видите этот визуальный стиль на веб-страницах, потому что браузеры по умолчанию отображают абзацы с пробелом. под ними, чтобы показать, где заканчивается одно и начинается другое, но если вы хотите стилизовать страницу так, чтобы вдохновленный печатью
стиль отступа в абзацах, вы можете сделать это с помощью отступ текста свойство стиля.Синтаксис этого свойства прост. Вот как вы можете добавить текстовый отступ ко всем абзацам в документе.
п {
текстовый отступ: 2em;
}
Настройка отступов
Один из способов точно указать абзацы для отступа, вы можете добавить класс к абзацам, которые вы хотите сделать с отступом, но это требует, чтобы вы отредактировали каждый абзац, чтобы добавить к нему класс. Это неэффективно и не следует HTML кодирование лучшие практики.
Вместо этого вам следует учитывать, когда вы делаете отступы в абзацах. Вы делаете отступ абзацев, следующих непосредственно за другим абзацем. Для этого вы можете использовать соседний селектор сестры. С помощью этого селектора вы выбираете каждый абзац, которому непосредственно предшествует другой абзац.
p + p {
текстовый отступ: 2em;
}
Поскольку вы делаете отступ в первой строке, вы также должны убедиться, что между абзацами нет лишнего пробела (это значение по умолчанию в браузере). Стилистически между абзацами должен быть пробел. или же сделайте отступ для первой строки, но не для обеих.
п {
нижнее поле: 0;
padding-bottom: 0;
}
p + p {
margin-top: 0;
padding-top: 0;
}
Отрицательные отступы
Вы также можете использовать отступ текста свойство вместе с отрицательным значением, чтобы начало строки перемещалось влево, а не вправо, как при обычном отступе. Вы можете сделать это, если строка начинается с кавычки, так что кавычка появляется в небольшое поле слева от абзаца, а сами буквы по-прежнему образуют красивый левый выравнивание.
Скажем, например, что у вас есть абзац, который является потомком цитаты, и вы хотите, чтобы он имел отрицательный отступ. Вы можете написать этот CSS:
blockquote p {
текстовый отступ: -.5em;
}
Это приведет к тому, что начало абзаца, который предположительно включает в себя начальную кавычку, будет немного сдвинуто влево, чтобы создать висящую пунктуацию.
Относительно полей и заполнения
Часто в веб-дизайне вы используете значения полей или отступов для перемещения элементов и создания пустого пространства. Однако эти свойства не будут работать для достижения эффекта абзаца с отступом. Если вы примените любое из этих значений к абзацу, весь текст этого абзаца, включая каждую строку, будет помещен вместо первой строки.