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

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

margin

Устанавливает величину отступа от каждого края элемента.

margin-bottom

Устанавливает величину отступа от нижнего края элемента.

margin-left

Устанавливает величину отступа от левого края элемента.

margin-right

Устанавливает величину отступа от правого края элемента.

margin-top

Устанавливает величину отступа от верхнего края элемента.

В этой главе мы поговорим о полях (свойство margin ) и отступах (свойство padding ) элемента. Между собой эти два свойства весьма схожи, однако все же это два абсолютно разных свойства.

Давайте разберемся в этих понятиях..

Поле ( margin ) — Это расстояние от внешней границы элемента до границы окна браузера или же элемента родителя.. ну границы того блока в который вложен наш элемент.

Отступом ( padding ) — Называют расстояние от внутренней границы элемента до его содержания текста, картинок таблиц..

На рисунке наглядно показаны эти расстояния, а так же место занимаемое бордюром ( border ) про него тоже не следует забывать.

Расстояния margin и padding указываются:

  • px — В пикселях или любых других допустимых CSS единицах измерения.
  • % — В процентах.
  • auto — Размер полей и отступов автоматически рассчитывается браузером.

Давайте попробуем сделать тоже самое, что показано на рисунке с помощью блоков

Внутренний отступ — пустое пространство между содержимым элемента и его рамкой (если она установлена). Для добавления и управления шириной внутренних отступов со всех четырех сторон элемента используется свойство padding.

Внешний отступ — пустое пространство, отделяющее элемент от других элементов или краев окна браузера. Для добавления и управления шириной внешних отступов со всех четырех сторон элемента используется свойство margin.

Свойства padding и margin могут принимать от одного до четырех значений:

Где значения устанавливаются по часовой стрелке, начиная с верхнего:

Читайте также:  Как удалиться с гет контакта


Если у свойств указать всего одно значение, то отступы со всех сторон будут одинаковой ширины.

На первый взгляд видимый эффект при использовании данных свойств выглядит одинаковым, чтобы заметить визуальную разницу между ними, можно например установить рамку для элемента или задать задний фон:

Для отступов, так же как и для рамок, есть свойства позволяющие управлять размером отступа с каждой стороны отдельно. Внутренние отступы регулируются свойствами: padding-top, padding-right, padding-bottom и padding-left. Внешние отступы регулируются свойствами: margin-top, margin-right, margin-bottom и margin-left.

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

Ссылка на основную публикацию
Как сбросить андроид если он заблокирован
В современных мобильных устройствах хранится огромное количество необходимой для пользователя информации. К тому же, это стандартный способ удаленной связи, поэтому...
Как проверить какой у меня интернет
Сегодня почти у каждого из нас есть доступ к Интернету – через домашний компьютер или мобильное устройство, а кто-то обеспечивает...
Как проверить конвертер спутниковой антенны на работоспособность
Что такое конвертер для спутниковой антенны. Для того, чтобы спутниковое телевидение работало, необходимо специальное оборудование, которое принимает сигнал от спутника,...
Как сбросить графический ключ на htc
Огромное количество пользователей современных гаджетов на операционной системе Android сталкиваются с проблемой блокировки устройства из-за забытого графического кода. Существует несколько...
Adblock detector