Mfano wa Style margin
- Kweli kuingia listStyleType
- Pya kuingia marginBottom
- Retua kufikia ukweli Kifaa cha HTML DOM Style
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 |
- Kweli kuingia listStyleType
- Pya kuingia marginBottom
- Retua kufikia ukweli Kifaa cha HTML DOM Style