Отступ и граница элемента css, свойства, задающие отступы и границы

Цель урока: Знакомство со свойствами, задающими отступы и границы элемента CSS; свойства margin, padding, border и outline

К оглавлению

Содержание:

Отступы в CSS
- Внешние отступы
- Внутренние отступы
Граница элемента (рамка)
Внешние границы (outline)
Некоторые приемы с границей

Отступы в CSS

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

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

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

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

Свойство:

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

Значения:

auto
величина: px или em
%

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

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

Пример:

...
<style type="text/css">

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 (верхний отступ)

Значения:

auto
величина: px или em
%

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

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

Пример:

...
<style type="text/css">

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 (трехмерная с тенью)

Пример:

none

dotted

dashed

solid

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

Значения:

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

Пример:

<style type="text/css">

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;

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

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

outline-color (цвет)

Значения:

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

outline-width (ширина)

Значения:

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

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

Значения:

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

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

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>
...

Результат:

К оглавлению