Доброго времени суток, уважаемые читатели. Сегодня мы рассмотрим тему: "Как сделать отступы для объекта на сайте". Статья о том, как сделать пробел или переход на новую строку, а так же отступы для элемента с любой стороны.

отступы для элемента

Пробел

Для того, чтобы сделать пробел в тексте, можно использовать специальные символы HTML:

 &#8195  -  длинный пробел
 &nbsp    - короткий пробел

В конце специального символа, нужно ставить точку с запятой ➡️ ;

Переход на новую строку

Переход на новую строку, можно осуществить при помощи тега <br> или <br />, в зависимости от используемой Вами спецификации. Тег используется в одиночку без пары. Злоупотреблять этим тегом не стоит.

Отступы для элемента со всех сторон

Чтобы создать отступы для необходимого элемента, можно использовать свойства padding или margin в стилях.

Рadding – используется для создания отступов внутри элемента.

Мargin – используется для создания отступов снаружи элемента.

Оба свойства можно использовать, как с указанием стороны, так и общим образом:

padding: 10px; - отступы со всех сторон по 10 пикселей.

padding: 10px 10px 10px 10px; - отступы со всех сторон по 10 пикселей.

рadding-left: 10px; - отступ слева 10 пикселей. (можно указать лево, право, верх, или низ)

  margin: 10px; - отступы со всех сторон по 10 пикселей.

 margin: 10px 10px 10px 10px; - отступы со всех сторон по 10 пикселей.

 margin-left: 10px; - отступ слева 10 пикселей. (можно указать лево, право, верх, или низ)

Рассмотрим подробнее чем отличаются padding и margin.

Например у нас есть див с текстом: 

 <div> Тут Текст </div>

Сделаем рамку:

<div
style="border: 2px solid #000000;"> Тут Текст </div>

Если мы будем использовать padding, то будут отступы внутри рамки.

Отступы внутри рамки, со всех сторон по 10 пикселей:

<div
style="border: 2px solid #000000; padding: 10px;"> Тут Текст </div>

При использовании margin, отступы будут снаружи рамки.

Отступы снаружи рамки, со всех сторон по 10 пикселей.

<div
style="border: 2px solid #000000; margin: 10px;"> Тут Текст </div>
варианты создания отступов

Все вышеописанные варианты, дадут Вам гибкость при создании необходимых отступов.

Сегодня мы рассмотрели тему: "Как сделать отступы для объекта на сайте". Сделали обзор всех вариантов создания отступов для нужного объекта.

Надеюсь статья была вам полезна. До встречи в новых статьях.

✍

С уважением, Андрей Бондаренко.