Properti Padding HTML DOM Style
gaya Objects Definisi dan Penggunaan
melapisi set properti atau mengembalikan elemen padding.
Properti ini dapat digunakan 1-4 macam nilai:
- Jika Anda menentukan nilai, misalnya: div {padding: 50px} - semua dalam waktu empat margin 50px.
- Jika kedua nilai-nilai yang ditentukan, misalnya: div {padding: 50px 10px} - margin atas dan bawah pada Nene adalah 50px, margin kiri dan kanan dan padding adalah 10px.
- Jika Anda menentukan tiga nilai, misalnya: div {padding: 50px 10px 20px} - dalam margin 50px, margin kiri dan kanan dan padding 10px, padding bawah adalah 20px.
- Jika Anda menentukan empat jenis nilai, seperti: div {padding: 50px 10px 20px 30px} - dalam margin adalah 50px, dan padding yang tepat adalah 10px, padding bawah adalah 20px, margin kiri adalah 30px.
tatabahasa
Pengaturan properti padding:
Object.style.padding="%|length|inherit"
Kembali padding:
Object.style.padding
| 值 | 描述 |
|---|---|
| % | 定义基于父元素宽度的百分比内边距。 |
| length | 使用 px、cm 等单位定义内边距的宽度。 |
| inherit | 内边距从父元素继承。 |
Dukungan Browser
Semua browser utama mendukung padding.
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
Mengubah div elemen dalam margin:
<!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