Margin properti HTML DOM Style
gaya Objects Definisi dan Penggunaan
Margin set properti atau kembali dari unsur-unsur luar.
Properti ini dapat digunakan 1-4 macam nilai:
- Jika Anda menentukan nilai, misalnya: div {margin: 50px} - semua empat margin 50px.
- Jika kedua nilai-nilai yang ditentukan, misalnya: div {margin: 50px 10px} - margin dan margin bawah adalah 50px, marjin kiri dan margin kanan adalah 10px.
- Jika Anda menentukan tiga nilai, misalnya: div {margin: 50px 10px 20px} - margin adalah 50px, margin kiri dan margin kanan adalah 10px, margin bawah adalah 20px.
- Jika Anda menentukan empat jenis nilai, seperti: div {margin: 50px 10px 20px 30px} - margin adalah 50px, margin kanan adalah 10px, margin bawah adalah 20px, margin kiri adalah 30px.
tatabahasa
Mengatur properti margin:
Object.style.margin="%|length|auto|inherit"
Pengembalian properti margin:
Object.style.margin
| 值 | 描述 |
|---|---|
| % | 定义基于父元素宽度的百分比外边距。 |
| length | 使用 px、cm 等单位定义外边距的宽度。 |
| auto | 浏览器设定的外边距（所有四个外边距是相等的）。 |
| inherit | 外边距从父元素继承。 |
Dukungan Browser
Semua browser utama mendukung sifat marjin.
Catatan: IE7 dan versi sebelumnya tidak mendukung "mewarisi" nilai.IE8 hanya menyediakan! DOCTYPE didukung "mewarisi". dukungan IE9 "mewarisi".
Tips dan Catatan
properti margin dan padding dimasukkan ke dalam ruang di sekitar elemen. Namun, perbedaan tersebut, marjin akan dimasukkan ke dalam ruang di sekitar luar perbatasan, ruang sisipan bantalan dalam perbatasan elemen.
contoh
contoh
Perubahan unsur margin div:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="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>本教程(w3big.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.margin="100px";
}
function changePadding(){
document.getElementById("ex2").style.padding="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>
Coba »
gaya Objects