Отступ от верха css. Изучаем отступы текста в html. Padding и border — внутренние отступы и рамки

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

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

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

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

Свойство margin

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

margin: 12px.

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

margin: 36px.

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

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

В первом примере от нижней и верхней границ блока будут сделаны отступы по 11 пикселей, по бокам блока - по 22 пикселя. Согласно второй форме записи, между верхним краем блока и контентом будет 11 пикселей, между нижним - 33 пикселя, по бокам - по 22 пикселя. В третьем случае отступ будет иметь значение 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 отступ текста слева несложно сделать - используется конструкция text-indent . Записывается она так:

text-indent: 11px.

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

text-indent: 11px;

text-align: justify.

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

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

text-indent: inherit.

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

text-indent: -22px.

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

padding-left: 22px.

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

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

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

Элементы могут быть вложенными, могут находиться по соседству друг от друга. Давайте рассмотрим следующий пример:

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

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

Существует несколько способов задания этих стилей. Например, непосредственно указать размер всех полей или отступов одним аргументом в какой-нибудь единице измерения (px, ex, em, pt, cm и так далее):

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

первый будет определять величину полей/отступов сверху и снизу, второй - слева и справа. При задании трех аргументов:

первый - поле/отступ сверху, второй - одновременно слева и справа, третий - снизу. При четырех аргументах:

первый - поле/отступ сверху, второй - справа, третий - снизу, четвертый - слева. Легко запомнить: первый - сверху, далее по часовой стрелке. Кроме того, можно задавать поля и отступы для конкретного края отдельно, с помощью соответствующих стилей: padding-top , padding-right , padding-bottom , padding-left , margin-top , margin-right , margin-bottom , margin-left . Значением этих стилей может быть только один аргумент, задающий величину поля/отступа для данной стороны.

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

В результате страница изменит вид к следующему:

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

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

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

HTML-код подопытной страницы:

С появлением свойств управления отступами на css у web разработчиков появились огромные возможности по управлению интерфейсом и дизайном страниц сайтов. До этого отступами управляли при помощи таблиц, что являлось значительно более сложным и объемным.

Рассмотрим основные свойства управления отсутпами.

Управление внешними отсупами в HTML на CSS при помощи свойства margin

Свойство css margin позволяет управлять именно внешними отступами . Допустим имеется изображение, для которого нужно указать внешние отсупы: 30 пикселей сверху, 20 слева, 10 справа и 5 снизу.

Для задания отсупа сверху мы пропишем: margin-top: 30px

Для задания отступа слева: margin-left: 30px

Отступ справа: margin-right: 10px

И снизу: margin-bottom: 5px

Можно все объединить, прописав следующее: margin: 30px 10px 5px 20px;

Например зададим эти отступы для изображения. Получаем следующий html код:

На видно как изображение сместилось относительно родительского элемента.

Если же прописать margin: 30px, то отступы css будут одинаковые со всех четырех сторон и будут равны 30 пикселям.

Есть варианты указания двух и трех значений в спецификации: margin:10px 20px;. Данный параметр сделает так, что появятся внешние отступы на css сверху и снизу 10px, слева и справа 20px;

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

В этой главе мы поговорим о полях (свойство margin ) и отступах (свойство padding ) элемента. Между собой эти два свойства весьма схожи, однако все же это два абсолютно разных свойства.

Давайте разберемся в этих понятиях..

Поле (margin ) - Это расстояние от внешней границы элемента до границы окна браузера или же элемента родителя.. ну границы того блока в который вложен наш элемент.

Отступом (padding ) - Называют расстояние от внутренней границы элемента до его содержания текста, картинок таблиц..

На рисунке наглядно показаны эти расстояния, а так же место занимаемое бордюром (border ) про него тоже не следует забывать.

Расстояния margin и padding указываются:

• px - В пикселях или любых других допустимых CSS единицах измерения.
• % - В процентах.
• auto - Размер полей и отступов автоматически рассчитывается браузером.

Давайте попробуем сделать тоже самое, что показано на рисунке с помощью блоков