คุณสมบัติ margin สไตล์
- หน้าก่อน listStyleType
- หน้าต่อไป marginBottom
- กลับไปหน้าต้น HTML DOM Style 对象
การกำหนดและการใช้งาน
margin
คุณสมบัตินี้ตั้งค่าหรือกลับค่าระยะหน้าขององค์ประกอบ
คุณสมบัตินี้สามารถใช้ค่าหนึ่งถึงสี่ค่าได้:
- ค่าเดียว เช่น: 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 屬性和 padding 屬性都在元素周圍插入空間。但是,不同之處在於,margin 在邊框周圍插入空間,而 padding 在元素的邊框內插入空間。
另請參閱:
CSS 教程:CSS ขอบเขตด้านนอก
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 รุ่น: | CSS1 |
การสนับสนุนโปรแกรมน่าติดตั้ง
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
การสนับสนุน | การสนับสนุน | การสนับสนุน | การสนับสนุน | การสนับสนุน |
- หน้าก่อน listStyleType
- หน้าต่อไป marginBottom
- กลับไปหน้าต้น HTML DOM Style 对象