Style margin katangian

Paglalarawan at Paggamit

margin Ang katangian na ito ay nagtatakda at ibabalik ng gilid na hangganan ng elemento.

Ang katangian na ito ay maaaring gamitin ng isang hanggan hanggang apat na halaga:

  • Isang halaga, halimbawa: div {margin: 50px} - Ang lahat ng apat na gilid na hangganan ay 50px
  • Dalawang halaga, halimbawa: div {margin: 50px 10px} - Ang gilid na hangganan sa itaas at ilalim ay 50px, ang gilid na hangganan sa kanan at kaliwa ay 10px
  • Tatlong halaga, halimbawa: div {margin: 50px 10px 20px} - Ang gilid na hangganan sa itaas ay 50px, ang gilid na hangganan sa kanan at kaliwa ay 10px, ang gilid na hangganan sa ilalim ay 20px
  • 四个值，例如：div {margin: 50px 10px 20px 30px} - 上外边距为 50px，右外边距为 10px，下外边距为 20px，左外边距为 30px

margin 属性和 padding 属性都在元素周围插入空间。但是，不同之处在于，margin 在边框周围插入空间，而 padding 在元素的边框内插入空间。

另请参阅：

CSS 教程：CSS Margin

CSS 参考手册：margin 属性

实例

例子 1

设置 <div> 元素的所有四个外边距：

document.getElementById("myDiv").style.margin = "50px 10px 20px 30px";

亲自试一试

例子 2

将 <div> 元素的所有四个外边距更改为 "25px"：

document.getElementById("myDiv").style.margin = "25px";

亲自试一试

例子 3

返回 <div> 元素的外边距：

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

亲自试一试

例子 4

margin 属性与 padding 属性的区别：

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

亲自试一试

语法

返回 margin 属性：

object.style.margin

设置 margin 属性：

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

属性值

值 描述
% 以父元素宽度的百分比定义外边距。
length 以长度单位定义外边距。
auto 浏览器设置外边距（所有四个外边距将相等）。
initial 将此属性设置为其默认值。请参阅 initial。
inherit 从其父元素继承此属性。请参阅 inherit。

技术细节

默认值： 0
返回值： 字符串，表示元素的外边距。
CSS Version: CSS1

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support