Mfano wa Style margin

Ufafanuzi na matumizi

margin Kuweka au kurejea kwa kifaa kwa kufanya kwenye kifaa.

Hii ya kwenda kwa athirika moja hadi mashirika mitano:

  • athirika moja, kama: div {margin: 50px} - Mawimbo wa nje ya kushoto, kusini, kushoto na kusini ni 50px
  • athirika mbili, kama: div {margin: 50px 10px} - Mawimbo wa nje ya kushoto na kusini 50px, mawimbo wa nje ya kushoto na kulia 10px
  • athirika tatu, kama: div {margin: 50px 10px 20px} - Ujenzi wa mawimbo wa nje ya kuzingatia 50px, mawimbo wa nje ya kushoto na kulia 10px, mawimbo wa nje ya kusini 20px
  • 四个值,例如:div {margin: 50px 10px 20px 30px} - 上外边距为 50px,右外边距为 10px,下外边距为 20px,左外边距为 30px

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

另请参阅:

CSS 教程:Kima cha kigeni cha CSS

CSS 参考手册:margin 属性

实例

例子 1

设置

元素的所有四个外边距:

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

亲自试一试

例子 2

元素的所有四个外边距更改为 "25px":

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

亲自试一试

例子 3

返回

元素的外边距:

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 length
Kuweka kina msingi kwa ukubwa wa ukurasa wa miwili wa kina kina (kina kina zote mbili zina ukubwa wote wengine). auto
initial Kuweka tabia hii kwa thamani yake ya chaguo cha kuzingatia. Angalia initial.
inherit Kuweka tabia hii kwa thamani yake ya chaguo cha kuzingatia kutoka kwenye kina kina ya mababu. Angalia inherit.

Mafano ya ujuzi

Chaguo cha kuzingatia: 0
Matokeo ya kifungu: Tafuta, inaonyesha kikuu cha kina msingi wa kina kwenye kina hizi.
Toleo la CSS: CSS1

Mwongozo wa kufikia kwa kina

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Mwongozo Mwongozo Mwongozo Mwongozo Mwongozo