Html css отступы и границы

Отступы и рамки в CSS с помощью параметров margin, padding и border

Здравствуйте, уважаемые читатели блога webcodius.ru! Сегодня мы продолжим изучение каскадных таблиц стилей или CSS. В прошлых статьях мы уже рассмотрели в общих чертах блочную верстку сайта. В результате у нас стали получаться вполне профессиональные web-страницы, но чего-то им не хватает. А не хватает им скорей всего отступов и рамок. Сегодня мы и займемся рассмотрением стилевых правил margin, padding и border, которые позволяют задавать отступы и рамки для html-элементов.

Параметры отступов в CSS

С помощью каскадных таблиц стилей существует возможность задавать отступы двух видов.

1. Внутренний отступ — это расстояние от воображаемой границы элемента до его содержимого. Величина расстояния задается с помощью параметра padding. Такой отступ принадлежит самому элементу и находится внутри него.

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

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

Внутренние отступы в CSS с помощью padding (top, bottom, left, right)

Свойства стиля padding-left, padding-top, padding-right и padding-bottom позволяют задать величины внутренних отступов, соответственно, слева, сверху, справа и снизу элемента web-страницы:

padding-top | padding-right | padding-bottom | padding-left: значение | проценты | inherit

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. При указании процентов, значение считается от ширины элемента. Значение inherit указывает, что оно наследуется от родителя.

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

p.test padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom:10px
>

Сборное правило padding позволяет указать отступы сразу со всех сторон элемента веб-страницы:

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

• если указать одно значение, то оно установит величину отступа со всех сторон элемента страницы;
• если указать два значения, то первое задаст величину отступа сверху и снизу, а второе — слева и справа;
• если указать три значения, то первое определит величину отступа сверху, второе — слева и справа, а третье — снизу;
• если указаны четыре значения, то первое установит величину отступа сверху, второе — справа, третье — снизу, а четвертое — слева.

Таким образом правило CSS приведенное выше можно максимально сократить и записать следующим образом:

Свойство margin или внешние отступы в CSS

Атрибуты стиля margin-left, margin-top, margin-right и margin-bottom позволяют задать величины внешних отступов, соответственно, слева, сверху, справа и снизу:

margin-top | margin-right | margin-bottom | margin-left: |auto|inherit

Как уже упоминалось выше внешним отступом является расстояние от границы текущего элемента до границы соседнего элемента, либо, если соседних элементов нет, до внутренней границы родительского контейнера.

Величину отступа можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах:

Значение auto означает, что размер отступов будет автоматически рассчитан браузером. В случае использования процентной записи, то отступы рассчитываются в зависимости от ширины родительского контейнера. Причем это относится не только к margin-left и margin-right, но и для margin-top и margin-bottom отступы в процентах будут рассчитываться в зависимости от ширины, а не высоты контейнера.

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

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

Внешние отступы мы также можем указать с помощью атрибута стиля margin. Он задает величины отступа одновременно со всех сторон элемента web-страницы:

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

Параметры рамки с помощью свойства border

При настройке рамок существует три типа параметров:

• border-width — толщина рамки;
• border-color — цвет рамки;
• border-style — тип линии с помощью которой будет нарисована рамка.

Начнем с параметра толщины рамки:

border-width: [значение | thin | medium | thick] | inherit

Толщину рамки можно задавать в пикселях, либо в других доступных в css единицах. Переменные thin, medium и thick задают толщину рамки в 2, 4 и 6 пикселей соответственно:

Как и для свойств padding и margin, для параметра border-width разрешается использовать одно, два, три или четыре значения, задавая таким образом толщину рамки для всех сторон сразу или для каждой по отдельности:

border-width: 5px 3px 5px 3px

Для текущего абзаца сделаем толщину верхней рамки 1px, правой 2px, нижней 3px, а левой 4px с помощью правила

С помощью атрибутов стиля border-left-width, border-top-width, border-right-width и border-bottom-width можно задавать толщину, соответственно, левой, верхней, правой и нижней сторон рамки:

Следующий параметр border-color с помощью которого можно управлять цветом рамки:

border-color: [цвет | transparent] | inherit

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

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

С помощью атрибутов стиля border-left-color, border-top-color, border-right-color и border-bottom-color можно задать цвет, соответственно, левой, верхней, правой и нижней сторон рамки:

И последний параметр border-style задает тип рамки:

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit

Тип рамки можно указывать сразу для всех сторон элемента или только для указанных. В качестве значений можно использовать несколько ключевых слов. Вид будет зависеть от используемого браузера и толщины рамки. Значение none используется по умолчанию и не отображает рамку и ее толщина задается нулевой. Значение hidden имеет тот же эффект. Получаемая рамка для остальных значений в зависимости от толщины приведена в таблице ниже:

Источник

CSS урок 10. Отступ и граница элемента CSS

Элемент в html — это прямоугольник, для которого можно указать величины внутренних и внешних отступов, а также границу, которая разделяет их.

Отступы в CSS устанавливаются, например, для блочных элементов и таблиц. Рассмотрим основные свойства CSS для установки отступов:

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

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

Свойство:

• margin-bottom (нижний отступ)
• margin-left (отступ слева)
• margin-right (отступ справа)
• margin-top (верхний отступ)

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

margin:margin-top margin-right margin-bottom margin-left; margin:10px 20px 20px 30px;

margin:margin-top margin-right margin-bottom margin-left; margin:10px 20px 20px 30px;

p{ border:5px solid red; /* красная рамка */ margin:20px; } div{ border:5px solid green; /* зеленая рамка */ }

/style>/head> body> div> Агния Барто - стихи p> Я на уроке в первый раз.br/> Теперь я ученица.br/> Вошла учительница в класс,-br/> Вставать или садиться?br/> /p> .

Агния Барто — стихи

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

.

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

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

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

• padding-bottom (нижний отступ)
• padding-left (отступ слева)
• padding-right (отступ справа)
• padding-top (верхний отступ)

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

padding:padding-top padding-right padding-bottom padding-left; padding:10px 20px 20px 30px;

padding:padding-top padding-right padding-bottom padding-left; padding:10px 20px 20px 30px;

p{ border:5px solid red; /* красная рамка */ padding:20px; /* внутренний отступ */ }

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

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

.

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

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

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

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

• none (без границы)
• dotted (из точек)
• dashed (пунктирная)
• solid (сплошная)
• double (двойная)
• groove (трехмерная)
• ridge (трехмерная)
• inset (трехмерная с тенью)
• outset (трехмерная с тенью)

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

p.one{ border-style:solid; border-width:5px; } p.two{ border-style:solid; border-width:medium; }

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

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

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

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

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

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

• red (цвет)
• rgb(255,0,0) (в системе rgb)
• #ff0000 (в шестнадцатиричной системе)
• transparent (прозрачная)

p{ border-top-style:solid; border-right-style:dotted; border-bottom-style:dashed; border-left-style:none; border-top-color:#0f0; border-right-color:#f00; }

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

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

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

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

Внешние границы (outline)

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

outline-color (цвет)

• red (цвет)
• rgb(255,0,0) (в системе rgb)
• #ff0000 (в шестнадцатеричной системе)
• invert (инвертированный, противоположный)

outline-width (ширина)

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

• none (без границы)
• dotted (из точек)
• dashed (пунктирная)
• solid (сплошная)
• double (двойная)
• groove (трехмерная)
• ridge (трехмерная)
• inset (трехмерная с тенью)
• outset (трехмерная с тенью)

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

outline:outline-color outline-style outline-width; outline: #0f0 solid thick;

outline:outline-color outline-style outline-width; outline: #0f0 solid thick;

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

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

img{ padding:20px; /* Поля вокруг изображения */ margin-right:10px; /* отступ справа */ margin-bottom:10px; /* отступ снизу */ outline:1px solid #666; /* параметры границы */ background:#f0f0f0; /* цвет фона */ }

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

p{ border:5px solid red; outline:6px 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> .

Источник