margin marginProperty

Style 对象参考手册Объект Style

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

Свойство margin задаёт или возвращает внешние отступы элемента.

Это свойство может принимать от 1 до 4 значений:

  • Если указано одно значение, например: div {margin: 50px} — все четыре внешних отступа равны 50px.
  • Если указано два значения, например: div {margin: 50px 10px} — верхний и нижний внешние отступы равны 50px, а левый и правый — 10px.
  • Если указано три значения, например: div {margin: 50px 10px 20px} — верхний внешний отступ равен 50px, левый и правый — 10px, а нижний — 20px.
  • Если указано четыре значения, например: div {margin: 50px 10px 20px 30px} — верхний внешний отступ равен 50px, правый — 10px, нижний — 20px, а левый — 30px.

Синтаксис

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

Object.style.margin="%|length|auto|inherit"

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

Object.style.margin

Значение Описание
% Задаёт процентный внешний отступ на основе ширины родительского элемента.
length Задаёт ширину внешних отступов, используя такие единицы, как px, cm и т. д.
auto Внешние отступы, заданные браузером (все четыре отступа равны).
inherit Внешние отступы наследуются от родительского элемента.

Поддержка браузеров

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Все основные браузеры поддерживают свойство margin.

Примечание:IE7 и более ранние версии не поддерживают значение "inherit". IE8 поддерживает "inherit", только если указан !DOCTYPE. IE9 поддерживает "inherit".

Советы и примечания

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

Примеры

Примеры

Измените внешние отступы элемента div:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример(example.com)</title>
<style type="text/css">
div{
    border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
    document.getElementById("ex1").style.margin="100px";
}
function changePadding(){
    document.getElementById("ex2").style.padding="100px";
}
</script>
</head>
<body>

<div id="ex1">Это некоторый текст.</div>
<br>
<button type="button" onclick="changeMargin()">Изменить внешние отступы элемента div</button>
<br>
<br>
<div id="ex2">Это некоторый текст.</div>
<br>
<button type="button" onclick="changePadding()">Изменить внутренние отступы элемента div</button>

</body>
</html>

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

Style 对象参考手册Объект Style Другие расширения