Свойство Style marginTop

Определение и использование

marginTop устанавливают или возвращают верхнее внешнее поле элемента.

Свойство margin и Свойство padding Вставляет пространство вокруг элементов. Однако, различие заключается в том, что margin вставляет пространство вокруг рамки, а padding - внутри рамки элементов.

Дополнительная информация:

Урок CSS:Внешние отступы CSS

Руководство CSS:Свойство margin-top

Руководство HTML DOM:Свойство margin

Пример

Пример 1

Установить верхнее внешнее поле элемента <div>:

document.getElementById("myDiv").style.marginTop = "50px";

Попробуйте сами

Пример 2

Вернуть верхнее внешнее поле элемента <div> к "normal":

document.getElementById("myDiv").style.marginTop = "0px";

Попробуйте сами

Пример 3

Возврат верхнего внешнего поля элемента <div>:

alert(document.getElementById("myDiv").style.marginTop);

Попробуйте сами

Пример 4

Разница между marginTop и paddingTop:

function changeMargin() {
  document.getElementById("myDiv").style.marginTop = "100px";
}
function changePadding() {
  document.getElementById("myDiv2").style.paddingTop = "100px";
}

Попробуйте сами

Синтаксис

Возврат свойства marginTop:

object.style.marginTop

Установка свойства marginTop:

object.style.marginTop = "%|length|auto|initial|inherit"

Значение свойства

Значение Описание
% Определение верхнего внешнего поля в процентах от ширины родительского элемента.
length Определение верхнего внешнего поля с помощью единицы измерения длины.
auto Настройки внешнего поля браузера.
initial Установите это свойство в его значение по умолчанию. См. initial.
inherit Преемственность этого свойства от родительского элемента. См. inherit.

Технические детали

default value: 0
Возвратное значение: строка, представляющая верхний внешнее поле элемента.
Версия CSS: CSS1

поддержка браузера

Хром Edge Firefox Safari Opera
Хром Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка