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

Содержание

1 Внутренний отступ (padding)

2 Внешний отступ (margin)

3 Отступ текста от картинки

в html для отступов используется css свойство padding и margin и у каждого их них свое предназначение.

padding
Добавляет внутренние отступы, сокращенная запись записывается по часовой стрелке

padding-top: 20px;

padding-right: 20px;

padding-bottom: 20px;

padding-left: 20px;

/* Сокращенная запись */

padding: 20px;

/* если нужно отступ только снизу */

padding-bottom: 20px;

/* Сокращенная запись отступ только снизу */

padding:0 0 20px 0;

margin
Добавляет внешние отступы (свойства записываются аналогично padding)

Внутренний отступ (padding)

Теперь нам нужна разобраться как работает то или иное свойство и начнем мы с padding, для примера я сделал простую ссылку с фоном и к ней мы применим внутренний отступ, пока кнопка выглядит во так

добавляем к нашей ссылке padding: 20px и как мы видим на фото изнутри с каждой стороны добавилось по 20px. Внутренний отсу

Внешний отступ (margin)

Теперь самое время воспользоваться внешним отступом и отодвинуть текст от ссылки но тут есть один нюанс. У нашей ссылки по умолчанию стоит свойство display: inline. это значит что она строчная. Для такой ссылки не сработает margin, чтобы он сработал нужно дописать в css display: inline-block; и кнопка станет блочно-строчной и внешний отступ сработает.

index.html

<!DOCTYPE html>

<head>

<title>Как в html сделать отступ текста</title>

<style>

.button {

background-color: #7209b7;

color: #fff;

text-decoration: none;

padding: 20px;

display: inline-block;

margin-bottom: 20px;

}

body {

margin: 200px;

}

</style>

</head>

<body>

<a href="#" class="button">Просто фиолетовая кнопка</a>

<p>Рядом какой то текст</p>

</body>

</html>

Отступ текста от картинки

С помощью внешнего отступа margin мы отодвинем текст от картинки на 100px