Создание отступов

При создании отступов используют следующие 2 свойства:

margin - для внешних отступов
padding - для внутренних отступов

Чтобы задать внешние отступы для абзаца, создадим правило и назовём его, например, ".otstup". В нём пропишем свойство margin и значение в пикселях:


.otstup {

margin: 40px;

border: 1px solid gray;

}

Это правило присвоим первому абзацу


<html>

<head>

<title>Пример CSS</title>

</head>

<body>

<p class="otstup">Здесь первое предложение.</p>

<p>Здесь второе предложение.</p>

<body>

</html>

Тэг <p> получил внешние отступы в 40 пикселей со всех сторон:

Здесь первое предложение.

Когда нужен отступ с конкретных сторон, то можно использовать следующие свойства:

margin-top - отступ сверху
margin-right - отступ справа
margin-bottom - отступ снизу
margin-left - отступ слева

К примеру зададим внешние отступы в 40 пикселей сверху и слева. Для этого используем свойства margin-top и margin-left со значениями 40px.


.otstup {

margin-top: 40px;

margin-left: 40px;

border: 1px solid gray;

}

Либо можно воспользоваться сокращенной записью свойства margin


.otstup {

margin: 40px 0 0 40px;

border: 1px solid gray;

}

Подробнее о сокращенной записи свойств.
Тэг <p> получил внешние отступы в 40 пикселей сверху и слева:

Здесь первое предложение.

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


.otstup2 {

padding: 40px;

border: 1px solid gray;

}

и присвоим его второму абзацу


<html>

<head>

<title>Пример CSS</title>

</head>

<body>

<p class="otstup">Здесь первое предложение.</p>

<p class="otstup2">Здесь второе предложение.</p>

<body>

</html>

Тэг <p> получил внутренние отступы в 40 пикселей со всех сторон:

Здесь второе предложение.

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

padding-top - отступ сверху
padding-right - отступ справа
padding-bottom - отступ снизу
padding-left - отступ слева

К примеру зададим внутренние отступы в 40 пикселей сверху и слева. Для этого используем свойства padding-top и padding-left со значениями 40px.


.otstup2 {

padding-top: 40px;

padding-left: 40px;

border: 1px solid gray;

}

Либо можно воспользоваться сокращенной записью свойства padding


.otstup2 {

padding: 40px 0 0 40px;

border: 1px solid gray;

}

Подробнее о сокращенной записи свойств.
Тэг <p> получил внутренние отступы в 40 пикселей сверху и слева:

Здесь второе предложение.

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