Как сделать отступ в html

Как сделать отступ в html

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

<p>Часто мы недовольны тем, как html расставляет отступы между различными элементами: абзацами, заголовками, ссылками и т. д. Нам хочется увеличить отступ, уменьшить или убрать его совсем. Стандартные средства html никогда не позволяли напрямую управлять отступами, но все меняется когда приходит она: каскадная таблица стилей или попросту CSS. СSS дает нам возможность делать любые отступы, какие мы только захотим.</p>

Как я уже сказал есть два вида отступов. Один вид мы так и будем называть отступом, а другой вид будем называть полем. Это более правильное название для него, и я вам советую придерживаться именно такого названия. Чтобы понять разницу между отступом и полем, необходимо увидеть не только содержимое абзаца, но и его границу. Мы поступим хитро и просто раскрасим его в другой цвет, например голубой. Пишем в файле стилей: p {background:rgba(0,200,255,0.2)}

Не буду подробно останавливаться на свойстве background. Скажу лишь, что оно задает фон любому элементу. В данном случае мы задали фон голубым цветом. О том как задать цвет читайте в статье Как задать цвет в HTML.

Мы имеем абзац с фоном голубого цвета, который выглядит вот так:

Как сделать отступ в HTML

Разберемся с отступом. Отступ – это расстояние на которое элемент удален от других элементов. Задается отступ свойством margin. Чаще всего отступ задается в пикселах. Зададим отступ 50 пикселей для нашего абзаца : p { background:rgba(0,200,255,0.2); margin:50px; }

Посмотрим что с ним стало.

Отступ в 50 пикселей

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

Еще раз: отступ – это расстояние, на которое элемент удален от других элементов.

Думаю, с этим понятно. Теперь запомним еще одно определение. Поле – это расстояние, на которое содержимое элемента удалено от границ элемента. Попытаемся вникнуть в него и понять. Попытались? Теперь давайте смотреть. Для управления полями в CSS есть свойство padding Установите нулевой отступ для нашего абзаца и установите поле размером 50px: p { background:rgba(0,200,255,0.2); margin:0; padding:50px; }

Смотрим что получилось:

Поле в 50px

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

Поле – это расстояние, на которое содержимое элемента удалено от границ элемента.

Давайте теперь установим отступ в 50 пикселей и поле в 50 пикселей одновременно и посмотрим что получится.


Карта сайта


Информационный сайт Webavtocat.ru