Отступы. Рамки

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

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

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

margin-left — отступ слева;
body { margin-left: 0 }
margin-right — отступ справа;
body { margin-right: 5px }
margin-top — отступ сверху;
body { margin-top: 5% }
margin-bottom — отступ снизу;
body { margin-bottom: 5mm }

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

Теперь, зная СSS, можно переписать эту строку так:

или так:

body { margin-left:0; margin-right:0; margin-top:0; margin-bottom:0 }

C помощью атрибута margin можно задать все внешние отступы за один раз:

margin: <top> <right> <bottom> <left>

Например:

body { margin: 5mm 5% 10px 0 }

Для совпадающих значений допускается и более короткая запись:

body { margin:0 }

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

С помощью атрибутов padding-left, padding-right, padding-right, padding-bottom можно задать отступы от элементов веб-страницы до его рамки (если она есть). Например: ими задается расстояние между текстом и рамкой ячейки таблицы. Может быть задано абсолютное или относительное значение:

padding-left — отступ слева;
td { padding-left: 0 }
padding-right — отступ справа;
td { padding-right: 10 }
padding-top —отступ сверху;
td { padding-top: 10mm }
padding-bottom — отступ снизу;
td { padding-bottom: 20 }

С помощью атрибута padding можно задать все внутринние отступы за один раз:

padding <top> <right> <bottom> <left>

Например:

td { padding: 15mm 20 10 0 }

Совпадающие отступы можно задать короче:

td { padding: 5 }

Рамки

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

Стиль линии рамки

С помощью атрибутов border-left-style (левая линия), border-right-style (правая линия), border-top-style (верхняя линия) и border-bottom-style (нижняя линия) можно задать тип линии рамки. Могут принимать следующие значения:

none — линия не отображается;
solid — линия отображается сплошной линией;
dotted — пунктирная линия;
dashed — штриховая линия;
double — линия отображается в виде двойной линии;
groove — вдавленная рельефная линия;
ridge — выпуклая рельефная линия;
inset — весь блок элемента отображается, как будто он вдавлен в лист;
outset — весь блок элемента отображается, как будто выдавлен из листа.

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

Тип рамки

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тип рамки</title>
<style type="text/css">
table { border-left-style:dashed; border-right-style:dotted; border-top-style:solid; border-bottom-style:groove }
td { border-left-style: none; border-right-style: none; border-top-style: none; border-bottom-style: none; text-align:center }
caption { border-top-style:solid }
p { border-left-style:dotted; border-right-style:dotted; border-top-style:dotted; border-bottom-style:dotted }
</style>
</head>

<body>
<table width="300" align="center">
<caption>Заголовок таблицы </caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<p>Текст в пунктирной рамке</p>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

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

Эти атрибуты могут быть объединены в одном атрибуте border-style:

border-style: <top> <right> <bottom> <left>

Если все значения совпадают, можно указать это значение один раз:

table { border-style:dotted }

Толщина линии рамки

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

table {border-left-width: 5px; border-right-width: 5px; border-top-width: 0; border-bottom-width: 10px }

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

thin — тонкая линия;
medium — средняя толщина линии;
thick — толстая линия.

table {border-left-width: medium; border-right-width: medium; border-top-width: thin; border-bottom-width: thick }

Эти атрибуты могут быть объединены в одном атрибуте border-width:

border-width: <top> <right> <bottom> <left>

Если значения совпадают, можно указать их один раз:

table {border-width: medium}

Цвет линии рамки

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

table { border-left-color: red; border-right-color: blue; border-top-color: green; border-bottom-color:black }

Если значения совпадают, можно указать их один раз, объединив в атрибут border-color:

table { border-color: red }

Одновременное задание атрибутов рамки

Если атрибуты рамки одинаковы для всех ее сторон, можно задать их в одном атрибуте border:

border: <стиль > <толщина > <цвет >

Поскольку значение атрибута однозначно определяет, к какому именно компоненту он относится, то их можно указать в произвольном порядке:

td { border: red thin solid }

Обсудить на форуме

Другие |

разработка веб-сайтов под ключ обучающие программы для веб-разработчиков