Свойство marginBottomобъекта Style
Объект Style
Определение и использование
Свойство marginBottom задаёт или возвращает нижний внешний отступ элемента.
Синтаксис
Установите свойство marginBottom:
Object.style.marginBottom="%|length|auto|inherit"
Возврат свойства marginBottom:
Object.style.marginBottom
| Значение | Описание |
|---|---|
| % | Определяет нижний внешний отступ в процентах от ширины родительского элемента. |
| length | Определяет ширину нижнего внешнего отступа с использованием таких единиц, как px, cm и т. д. |
| auto | Нижний внешний отступ, заданный браузером. |
| inherit | Нижний внешний отступ наследуется от родительского элемента. |
Поддержка браузеров
Все основные браузеры поддерживают свойство marginBottom.
Примечание: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.marginBottom="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingBottom="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>
<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.marginBottom="100px";
}
function changePadding(){
document.getElementById("ex2").style.paddingBottom="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 Другие расширения