Отделяем заголовки от абзацев или структурирование текста на html странице

Содержание:

Пример для установки полей и отступов в HTML-списке
Пример использования полей и отступов с элементом form
Выравнивание по горизонтали
Форматирование
Значения свойства
- Пример
Горизонтальные линии
Сценарии использования и практические примеры
- ▍Компонент-заголовок
- ▍Расстояния в сеточных макетах — CSS Flexbox
- ▍Работа с нижним внешним отступом
  - Анализ решений
- ▍Компонент-карточка
- ▍Внешние отступы, применяемые в зависимости от обстоятельств
HTML и CSS
- - Небольшой пример использования CSS:
Нумерованные и маркированные списки в HTML
Разбитие текста в HTML на блоки через тег
Отступ текста в HTML при помощи margin
Абзацы
- Не забывайте про закрывающий тег
Абзацы в HTML
Абзацы
- Не забывайте про закрывающий тег
Разбитие текста в HTML на абзацы через тег
Отступы
Сценарии использования и практические примеры
- ?Компонент-заголовок
- ?Расстояния в сеточных макетах — CSS Flexbox
- ?Работа с нижним внешним отступом
  - Анализ решений
- ?Компонент-карточка
- ?Внешние отступы, применяемые в зависимости от обстоятельств
Отступ текста в HTML при помощи margin
Смена регистра
Бонус — красная строка и отступы в абзаце
HTML: Абзац и красная строка
- Абзацы
  - Не забывайте про закрывающий тег
- Красная строка
Граница элемента (рамка)
- border-style (стиль границы)
- border-width (ширина границы)
- border-color (цвет границы)
Почему в статье я использую именно inline-block?
Некоторые приемы с границей
Как выровнять текст в HTML

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

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

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

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

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

padding: 10px;

мы получим следующий вид:

Посмотреть онлайн демо-версию и код

Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:

Посмотреть онлайн демо-версию и код

Весь класс для ссылок внутри элемента <ul> будет следующим:

padding: 10px;
margin: 2px;
text-decoration: none;
color: #fff;
background-color: #DA8119;
display:block;

Пример использования полей и отступов с элементом form

Урок 3. заголовки и форматирование текста

Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.

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

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

btn

Поля для текстовых полей:

padding: 10px;

Поля для кнопки:

padding: 9px 15px;

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

Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin. В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.

margin: -3px;

Поля формы будут выглядеть следующим образом:

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

После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.

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

Для кнопки “Save” мы также применили свойство padding:

padding: 9px 15px;

которое используется для выравнивания текста во всех направлениях.

Выравнивание по горизонтали

Перенос текста с помощью css и html

Для него используется свойство text-align. Выровнять с его помощью можно только блочный текст (теги <div>, <p>). Свойству может быть задано одно из четырех значений:

left — выравнивание по левому краю.
right — по правому краю.
center — по центру.
justify — по ширине.

Вот код HTML-страницы, текст которой выровнен по правому краю:

<!DOCTYPE html>
<html>
<head>
    <title>Выравнивание по правому краю</title>
    <style type="text/css">
    p { text-align: right; }
    </style>
</head>
<body>
<p>Текст, который вы сейчас читаете, выровнен по правому краю.</p>
</body>
</html>

Выглядеть страница будет так:

Если текст выровнен по ширине (text-align: justify), то можно использовать свойство text-align-last, чтобы задать отличное от основного содержимого выравнивание последней строчки текста элемента.

Форматирование

Как поменять цвет текста в html?

Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 {
        text-transform: uppercase; 
        text-decoration: overline;
      }
      p.class2 {
        text-transform: lowercase;
        text-decoration: line-through;
      }
      p.class3 {
        text-transform: capitalize;
        text-decoration: underline;
      }
    </style>
  </head>

  <body>
    <p class="class1">Первый абзац.</p>
    <p class="class2">Второй абзац.</p>
    <p class="class3">Третий абзац.</p>
    <p style="letter-spacing:3px;">Расстояние между символами в тексте изменено
    с помощью свойства letter-spacing.</p>
  </body>
</html>

Попробовать »

С этой темой смотрят:

Выравнивание текста в CSS
Цвет и тень текста в CSS
Как изменить шрифт в CSS
CSS стиль и размер шрифта
Стандартные (безопасные) шрифты

Значения свойства

Значение	Описание
auto	Автоматически вычисляется браузером как ноль.
величина	Указывает размер поля в единицах измерения, используемых в CSS.
%	Величина, указанная в процентах, вычисляется в зависимости от ширины области содержимого родительского элемента.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

CSS Свойство:

margin-bottom:

Результат:

Элемент, у которого будет изменятся ширина нижнего поля.
Другой элемент.

CSS Код:

div#myBox { background-color: red; margin-bottom: auto; }

Кликните на любое значение свойства, чтобы увидеть результат

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

Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя. Так это выглядит в коде html:

И вот как это отображается:

Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web-страницы и имеет один-два пиксела в толщину, в зависимости от используемого браузера.

С помощью атрибутов можно задавать внешний вид горизонтальной линии. Тег «hr» поддерживает следующие атрибуты:

align — определяет выравнивание линии;
color — задает цвет линии;
size — устанавливает толщину линии в пикселях;
width — устанавливает ширину линии в пикселях.

Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:

Результат будет примерно таким:

Сценарии использования и практические примеры

▍Компонент-заголовок

Компонент — заголовок, у которого настроено следующее: отступ слева и справа, пространство вокруг логотипа, пространство вокруг навигационного элемента, расстояние между навигационным элементом и именем пользователя

Внутренние и внешние отступы

доступность

Расстояния до и после разделителя неодинаковы

Настройка минимальной ширины для навигационных элементов.
Увеличение горизонтального внутреннего отступа.
Добавление в левой части разделителя дополнительного внешнего отступа.

Вот

▍Расстояния в сеточных макетах — CSS Flexbox

Сеточный макет

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

здесь

ВотВнутренние и внешние отступы

▍Работа с нижним внешним отступом

Набор компонентов, расположенных горизонтально

Анализ решений

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

Два столбца элементов и проблема решения №1

▍Компонент-карточка

Компонент-карточка (если вам захотелось есть — извиняюсь)Внутренние и внешние отступы

Разделитель не привязан к краю

Разделитель в норме, но содержимое карточки расположено неправильно

Карточка настроена так, как нужноВот

type-scale.com

Схема страницы и применение свойств margin-top и margin-bottomВот

▍Внешние отступы, применяемые в зависимости от обстоятельств

Элементы в нормальном состоянии и в ситуации нехватки местаотсюда

Дочерние элементы находятся на новых строкахЭлементы не касаются друг друга

Вот

HTML и CSS

CSS и HTML — это два разных языка для разных целей.

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

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

Небольшой пример использования CSS:

С помощью стилей, картинка была позиционирована с левой стороны, а для текста был изменен размер, цвет и добавлена тень.

В браузере Internet Explorer 9 и в более ранних версиях не поддерживается свойство, добавляющее тень к тексту.

Нумерованные и маркированные списки в HTML

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

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

Любой список в HTML представляет собой набор элементов, каждый из которых помещается внутрь тега «li». Затем все элементы помещаются внутрь тега «ul», если нужен маркированный список, или внутрь тега «ol», если нужен нумерованный список.

И выглядят они примерно так:

В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег «ul» добавляется атрибут type, если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег «li» если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:

disc — закрашенная окружность;
circle — окружность;
square — квадрат.

По умолчанию атрибут type равен disc. Пример использования:

Отображение в браузере:

Нумерованный список также поддерживает атрибут type, с помощью которого можно задавать следующие типы маркера:

A — заглавные латинские буквы;
a — строчные латинские буквы;
I — заглавные римские цифры;
i — строчные римские цифры;
1 — арабские цифры.

По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start, который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed, который меняет нумерацию на обратный порядок. Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.

Списки можно помещать друг в друга, создавая вложенные списки. Вложенный список помещается внутрь элементов «li» внешнего списка:

И в браузере:

В HTML есть еще третий вид списка — список определений, который представляет из себя перечень терминов и их определений. Этот список задается с помощью парного тега «dl». Внутри него помещают пары «термин — определение». Термины заключают в парный тег «dt», а определения — в парный тег «dd»:

Отображение в браузере:

На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:

И посмотрим результат:

Разбитие текста в HTML на блоки через тег

Этот вариант похож на вид абзацев, только вместо тега <p> используется тег <div>:

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

или же через отдельный идентификатор блока:

Тег <div> как и тег <p> имеет поддержку атрибута «align» (с такими же значениями), а также атрибута «title» для указания подсказки появляющейся при наведении:

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

Отступ текста в HTML при помощи margin

Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока <div>, тег таблицы <table>, абзаца <p>, секции <section> и так далее.

Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.

Делается это так:

Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.

HTML:

CSS:

При помощи этого свойства мы можем задать разные отступы тексту в HTML:

margin-left — расстояние слева
margin-right — расстояние справа
margin-top — расстояние сверху
margin-bottom — расстояние снизу

Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:

margin: 10px; — делаем отступ текста 10px со всех сторон
margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px

Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.

Абзацы

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

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

Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег <p>, который разделяет фрагменты текста вертикальным отступом (до и после абзаца добавляется пустая строка).

 <p>Абзац</p>

Не забывайте про закрывающий тег

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

 <p>Абзац <p>Другой абзац</p>

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

Абзацы в HTML

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

Блоки текста в HTML разделяются между собой при помощи тегов абзаца <p></p>. По вертикали между абзацами появляется небольшой отступ или отбивка.

Как разделить текст абзацами? Пример:

Результат

Первый абзац, помещенный в теги p

Второй абзац, помещенный в теги p

То есть абзац начинается с тега <p> и заканчивается закрывающим его тегом </p>. При этом между различными смысловыми блоками в цельном тексте создаются паузы (до абзаца и после него появляются пустые строки, отступы), повышая читабельность текста, улучшая компоновку и внешний вид длинных и сложных текстов.

Если между вашими абзацами получаются слишком большие отступы (пустые строки), не вздумайте использовать тег для их уменьшения, лучше обратите внимание на файл style.css, в котором прописаны параметры отступов между абзацами. Тег используется для переноса строки — это совсем другое и не следует использовать его для создания абзацев

Что такое перенос строки и зачем он нужен, читайте тут.

Что вы найдете в файле style.css? Вы найдете параметры отступов, стили margin и padding (надеюсь вы знаете о разнице между этими свойствами) применяемые к абзацу и задающие для него отступы, в том числе сверху и снизу. Найдя эти стили, вы сможете их изменить, увеличив или уменьшив отступы между абзацами.

Абзацы

 <p>Абзац</p>

Не забывайте про закрывающий тег

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

 <p>Абзац <p>Другой абзац</p>

Разбитие текста в HTML на абзацы через тег

Как вы уже поняли из заголовка, в HTML (да и не только) существует такое понятие, как абзацы (параграфы). Для них отведен специальный тег типа:

Весь текст, заключенный в него, переносится на новую строку. По умолчанию (если нет глобальных стилей) он имеет свой отступ. Использование следующее:

Здесь стоит отметить то, что использование пустого тега типа:

не даст вам дополнительной пустой строки, как это можно сделать в первом варианте. При этом, если немного схитрить и поместить в пустой тег код пробела, это все же даст дополнительную пустую строку:

Для того чтобы задать желаемый отступ между абзацами, воспользуйтесь глобальными стилями:

Или же присвойте абзацу свой идентификатор, за счет которого примените свой персональный стиль:

Помимо этого, тег <p> имеет поддержку атрибута «align», с помощью которого можно задать выравнивание текста.

Допустимые значения:

left – выравнивание по левому краю (значение по умолчанию).

center – выравнивание по центру.

right – выравнивание по правому краю.

justify – выравнивание по ширине (по левому и правому краю одновременно). В этом случае, между словами добавляются пробелы.

Этот вариант оформления текстов я люблю больше всего, так как можно настроить желаемое расстояние между абзацами. Тег из первого же варианта (<br />) я использую редко.

Отступы

Я использовал термин »отступы«, чтобы его было проще понять. Но в HTML мы используем промежутки, чтобы создать вокруг объекта пустое пространство. Можно использовать атрибут style со значением padding, чтобы задать для абзаца отступ слева или справа.

Ниже приводится пример абзацев с отступом слева и справа:

<!Doctype html>
<html><head><title>Отступы абзацев с помощью атрибута Style</title></head>
<body>
<p style=”text-align:justify”> Этот абзац не имеет отступа, он просто выровнен по ширине. Посмотрите на атрибут style элемента P для этого абзаца.</p>
<p style=”padding-left:30px; text-align:justify”>Для этого абзаца я задал отступ слева в 30 пикселей с помощью стиля padding-left:30px. Также этот абзац выровнен по ширине с помощью стиля text-align:justify. Как вы уже знаете, мы можем использовать несколько значений для атрибута Style, разделяя их точкой с запятой.</p>
<p style=”padding-right:30px; text-align:justify”>А этот абзац имеет отступ справа в 30 пикселей, но не имеет отступа слева. Он также выровнен по ширине. Значение ‘padding-right’ атрибута style задает отступ справа. Если вы не видите эффекта, уменьшите ширину окна браузера, чтобы абзац HTML, выровненный по ширине, отображался надлежащим образом.</p>
</body></html>

Сценарии использования и практические примеры

?Компонент-заголовок

Внутренние и внешние отступы

доступность

Расстояния до и после разделителя неодинаковы

Настройка минимальной ширины для навигационных элементов.
Увеличение горизонтального внутреннего отступа.
Добавление в левой части разделителя дополнительного внешнего отступа.

Вот

?Расстояния в сеточных макетах — CSS Flexbox

Сеточный макет

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

здесь

ВотВнутренние и внешние отступы

?Работа с нижним внешним отступом

Набор компонентов, расположенных горизонтально

Анализ решений

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

Два столбца элементов и проблема решения №1

?Компонент-карточка

Компонент-карточка (если вам захотелось есть — извиняюсь)Внутренние и внешние отступы

Разделитель не привязан к краю

Разделитель в норме, но содержимое карточки расположено неправильно

Карточка настроена так, как нужноВот

type-scale.com

Схема страницы и применение свойств margin-top и margin-bottomВот

?Внешние отступы, применяемые в зависимости от обстоятельств

Элементы в нормальном состоянии и в ситуации нехватки местаотсюда

Дочерние элементы находятся на новых строкахЭлементы не касаются друг друга

Вот

Отступ текста в HTML при помощи margin

Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.

Делается это так:

PHP

<div style=”margin-left:20px;”> Текст блока HTML </div>

1	<div style=”margin-left20px;”>ТекстблокаHTML<div>

HTML:

PHP

<div class=»text-block»> Текст блока </div>

1	<div class=»text-block»>Текстблока<div>

CSS:

PHP

.text-block {
margin-left:20px;
}

1
2
3

.text-block{

margin-left20px;

}

Если вы не создаёте страницу с нуля, а редактируете уже существующую, то можно не задавать новый класс, а определить уже имеющийся класс или идентификатор. Как это сделать показано в этой статье:«Как определить ID и класс элемента на странице?»

При помощи этого свойства мы можем задать разные отступы тексту в HTML:

margin-left — расстояние слева
margin-right — расстояние справа
margin-top — расстояние сверху
margin-bottom — расстояние снизу

Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:

margin: 10px; — делаем отступ текста 10px со всех сторон
margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px

Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.

Обратите внимание, если вы задаёте верхний или нижний отступ для тега , , — то, скорее всего, он не сработает. Это связано с тем что верхний и нижний margin работает только для блочных элементов HTML, а указанные выше теги являются строчными

Для решения проблемы можно дополнительно задать этому тегу CSS свойство display:inline-block; чтобы к нему применялись свойства одновременно блочного и строчного элемента HTML.

Смена регистра

Указав свойство text-transform, вы можете сделать так, чтобы все буквы текста были заглавными (значение uppercase), строчными (lovercase), или чтобы каждое слово начиналось с большой буквы (capitalize).

Код:

<!DOCTYPE html>
<html>
<head>
    <title>text-decoration</title>
</head>
<body>
<p style="text-transform: uppercase;">Здесь все буквы будут большими.</p>
<p style="text-transform: lovercase;">Все буквы этой строки будут строчными.</p>
<p style="text-transform: capitalize;">Здесь каждое слово будет начинаться с заглавной буквы.</p>
</body>
</html>

Результат:

Обратите внимание, что текст в коде набран как обычно: единственная заглавная буква стоит в начале предложения. Отображение на странице меняет CSS-стиль

Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке

Бонус — красная строка и отступы в абзаце

Для удобства восприятия письменного текста в школе нас заставляли делать на первой строке абзаца «красную строку» — небольшой отступ слева от линии основного текста.

В оформлении веб-страниц это встречается не так часто, но все же встречается и для того чтобы закрыть эту потребность вам нужно знать лишь одно свойство text-indent: 10%; которое я применю к следующему абзацу при помощи этого кода:

Обратите внимание, что я делаю это для примера и поэтому применил свойство в HTML, а не в файле CSS (что такое CSS и зачем он нужен?). Если вы хотите отредактировать подобным образом все абзацы на вашем сайте, добавив красную строку, нужно внести изменения в файл style.css

Либо добавьте в HTML-код страницы код (можно задавать размер отступа в px, либо в %):

Ну вот и все что нужно вам знать по этой теме. А в следующих статьях я расскажу вам о тегах <NOBR> и <BR>, которые применяются в особых случаях.

HTML: Абзац и красная строка

Абзацы

Для создания таких структурных единиц текста, как абзацы, в HTML-документах используется тег

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

Примечание: по умолчанию расстояние между абзацами равно 1em (em — это единица измерения равная высоте шрифта), то есть расстояние между абзацами напрямую зависит от размера шрифта.

Для изменения отступов между абзацами, без изменения размера шрифта, можно воспользоваться CSS свойством margin.

Не забывайте про закрывающий тег

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

Красная строка

Что такое красная строка? Согласно определению, это начальная строка абзаца, которую раньше выделяли красным цветом (откуда и пошло название). До того, как было изобретено книгопечатание, книги писали от руки – главу или часть текста, первое слово или букву писали красной краской. Так появилось понятие «писать с красной строки» — это означает начало новой мысли, главы или части.

Однако при создании веб-страниц оформление красной строки используется достаточно редко, несмотря на то, что она позволяет с гораздо большим удобством воспринимать текст в визуальном плане, что для традиционного читателя достаточно важно – не всем удобно читать электронный вариант текста. Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением:

Для добавления красной строки к вашим абзацам нужно воспользоваться CSS свойством text-indent, которое позволяет поставить отступ перед первым предложением:

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

Примечание: не обязательно устанавливать отступ размером в 25px, вы можете выбрать оптимальный размер отступа сами, также с помощью свойства text-indent возможно сделать выступающую над остальным текстом строку, для этого нужно задать отрицательное значение для свойства ( например: -30px).

Граница элемента (рамка)

Граница элемента в CSS устанавливается при помощи свойства .

border-style (стиль границы)

Значения:

(без границы)
(из точек)
(пунктирная)
(сплошная)
(двойная)
(трехмерная)
(трехмерная)
(трехмерная с тенью)
(трехмерная с тенью)

Пример:

none

dotted

dashed

solid

border-width (ширина границы)

Значения:

(тонкая)
(средняя)
(толстая)
значение

Пример:

<style type="text/css">

p.one{
	border-stylesolid;
	border-width5px; 
}
p.two{
	border-stylesolid;
	border-widthmedium; 
}

<style><head> 
<body> 
<p class="one">
Я на уроке в первый раз.<br>
Теперь я ученица.<br>
Вошла учительница в класс,-<br>
Вставать или садиться?<br>
<p>
<p class="two">
Как надо парту открывать,<br>
Не знала я сначала,<br>
И я не знала, как вставать,<br>
Чтоб парта не стучала.<br>
<p>

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Как надо парту открывать,
Не знала я сначала,
И я не знала, как вставать,
Чтоб парта не стучала.

border-color (цвет границы)

Значения:

(цвет)
(в системе rgb)
(в шестнадцатиричной системе)
(прозрачная)

Для каждой стороны границы можно задать свой стиль:

p{
	border-top-stylesolid;
	border-right-styledotted;
	border-bottom-styledashed; 
	border-left-stylenone; 
	border-top-color#0f0;
	border-right-color#f00;
}

Результат:

Я на уроке в первый раз.
Теперь я ученица.
Вошла учительница в класс,-
Вставать или садиться?

Краткая запись:

borderborder-width border-style border-color;
border 1px solid #000;

Почему в статье я использую именно inline-block?

На самом деле «Проблема» пробелов для inline-block и обычных инлайн элементов — является общей. Т.е. и с теми и с другими происходят идентичные вещи. Ненавистные отступы, появляются у тех и у других. Просто дело в том, что:Во-первых, inline-block имеет больше возможностей, таких например, как задание ширины или высоты и т.д.Во-вторых, мне всё-таки хотелось немного объяснить вам, что такое inline-block и что они из себя представляют, всё-же они относятся к строкам, как-никак.Ну и в-третьих это то, что с inline-block связаны определённые проблемы в браузере Safari, о которых мне бы хотелось, чтобы вы знали.

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

Некоторые приемы с границей

Рамка вокруг изображения

Пример:

img{
	padding20px; /* Поля вокруг изображения */
	margin-right10px; /* отступ справа */
	margin-bottom10px; /* отступ снизу */
	outline1px solid #666; /* параметры границы */
	background#f0f0f0; /* цвет фона */
}

Результат:

Двойная рамка с использованием CSS

Пример:

p{
	border5px solid red;
	outline6px solid orange;
}

Результат:

Путь осилит идущий,
И поэтому я иду.
Через горы и пущи,
Через радость мою и беду.

Эффектные рамки для изображений

Пример:

...
.photo {
	width	 150px;
	padding	 10px 10px 20px 10px;
	border	 1px solid #BFBFBF;
	background-color	 white;
	-webkit-box-shadow	 2px 2px 3px rgba(135, 139, 144, 0.4);
	-moz-box-shadow	 2px 2px 3px rgba(135, 139, 144, 0.4);
	box-shadow		 2px 2px 3px rgba(135, 139, 144, 0.4);
}

<style><head> 
<body> 
<div class="photo">
	<img  src="2.JPG" width="150" alt="">
	<p>Не ешь меня!!!<p>
<div>
...

Результат:

Как выровнять текст в HTML

Можно выровнять абзац, используя атрибут align со следующими значениями:

text-align: left|right|center|justify|initial|inherit;

Скопируйте следующий код в файл .html.

<!Doctype html><html><head><title>Выравнивание абзаца с помощью атрибута Style </title></head>
<body>
<p style=”text-align:center”>Этот абзац выровнен по центру</p>
<p style=”text-align:right”>Этот абзац выровнен по правому краю</p>
<p style=”text-align:justify”>Этот абзац выводится в окне браузера, выровненным по ширине. Распределенный по ширине абзац выравнивается по правому и по левому краю за счет добавления дополнительных пробелов. Вы можете видеть, что края выровненного по ширине абзаца соответствуют краям абзацев, выровненных по левому и по правому краю. В выровненном по левому краю абзаце левый край является ровным, а в абзаце, выровненном по правому краю - правый. Вы видите, что у этого абзаца оба края являются ровными? Это достигается благодаря стилю text-align:justify.</p>
<body></html>

В окне браузера HTML код абзаца выглядит следующим образом.