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