Закрыть ... [X]

Как в css сделать отступы текста

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

Поля и отступы: в чём разница?

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

  • поле задаётся свойством padding, отступ – margin;
  • поле определяется промежутком между содержимым и границей блока, отступ – между границами соседних блоков;
  • поля могут как учитываться в размерах элемента (ширине и высоте), так и нет.

отступ текста css

Свойство margin

Итак, чтобы задать горизонтальный или вертикальный отступ текста CSS, используют конструкцию margin. Данное свойство применяется к тегу <p></p> задающего абзац документа. В самом простом случае оно записывается как:

margin: 12px.

Такая строчка означает, что вокруг блока текста (или любого другого блока) со всех сторон будет сделан отступ в 12 пикселей. Чтобы увеличить промежуток, например, в три раза, достаточно записать:

margin: 36px.

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

  1. margin: 11px 22px.
  2. margin: 11px 22px 33px.
  3. margin: 11px 22px 33px 44px.

В первом примере от нижней и верхней границ блока будут сделаны отступы по 11 пикселей, по бокам блока – по 22 пикселя. Согласно второй как в css сделать отступы текста форме записи, между верхним краем блока и контентом будет 11 пикселей, между нижним – 33 пикселя, по бокам – по 22 пикселя. В третьем случае отступ текста CSS будет иметь значение 11 пикселей сверху, 22 пикселя справа, 33 пикселя снизу и 44 пикселя слева.

абзацный отступ

Также доступна возможность записи расстояния до границы блока только с одной стороны: margin-top, margin-bottom, margin-left, margin-right. Переведя названия свойств на русский язык, несложно догадаться об их назначении. Например, следующая запись говорит о том, что отступ справа будет равен 22 пикселя:

margin-right: 22рх.

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

Свойство margin имеет особенность, которую должен помнить разработчик, когда использует отступ текста CSS по вертикали. Интервалы соседних элементов не суммируются, а налагаются друг на друга. Например, пусть один из блоков имеет margin-bottom: 15px, а примыкающий к нему снизу блок margin-top: 35px. Школьная арифметика и здравый смысл подсказывают, что общий отступ между ними будет 50 пикселей. На практике это не так. Блок с большим значением свойства margin «поглотит» своего соседа. В итоге интервал между элементами будет 35 пикселей.

css отступ текста слева

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

Оформляя документ в текстовом редакторе, пользователи предпочитают задавать каждый новый абзац с помощью отступы «красной» строки. С помощью CSS отступ текста слева несложно сделать – используется конструкция text-indent. Записывается она так:

text-indent: 11px.

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

text-indent: 11px;

text-align: justify.

Помимо пикселей, при описании разметки допускается использование других единиц – дюймов, пунктов, процентов. Пусть блок имеет отступ текста CSS, равный 10%. При ширине блока, равной 500 пикселям, красная строка будет составлять 50 пикселей (10% от 500).

вертикальный отступ текста css

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

text-indent: inherit.

Удивительно, но абзацный отступ может принимать и отрицательные значения! В этом случае формируются так называемые выступы, то есть основной текст остаётся на месте, а первая строка смещается влево на 22 пикселя:

text-indent: -22px.

Чтобы буквы не перешли за левую границу браузера, дополнительно к text-indent нужно использовать конструкцию для задания поля:

padding-left: 22px.

отрицательный отступ текста css

Полезные рекомендации

Основные свойства CSS для форматирования текста рассмотрены. А закрепить их поможет практика. Вот несколько заключительных советов, как применять изученный материал при разработке веб-сайтов:

  • красная строка и отступ текста – разные понятия, и для их указания используются разные свойства;
  • для вертикальных отступов правила математики не действуют – интервалы накладываются, «побеждает» элемент с большим значением;
  • отрицательный абзацный отступ используют, чтобы указать первую строку абзаца с помощью изображения.

Источник: http://fb.ru/article/298349/shpargalka-kak-sdelat-otstup-teksta-css


Шпаргалка: как сделать отступ текста CSS


Как в css сделать отступы текста

Похожие новости


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




ШОКИРУЮЩИЕ НОВОСТИ