Margin CSS (margin)
Harta CSS Margin (margin) mentakrifkan ruang di sekeliling elemen.
Margin
margin mengosongkan elemen sekeliling (luar sempadan ) kawasan. Margin tidak mempunyai warna latar belakang dan telus sepenuhnya
margin boleh menukar jidar atas, bawah, kiri dan kanan elemen secara bebas. Ia juga mungkin untuk menukar semua sifat sekaligus. Unit boleh menggunakan piksel px, peratusan, sentimeter, dsb.
Sifat jidar CSS
Dalam CSS, ia boleh menentukan margin yang berbeza untuk sisi yang berbeza
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
Instance
Tetapkan margin pada sisi yang berbeza
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>Jalankan program untuk mencubanya
Margin - atribut trengkas
Untuk memendekkan kod, adalah mungkin untuk menggunakan semua atribut margin yang ditentukan oleh margin dalam satu atribut. Ini dipanggil atribut singkatan.
Atribut yang disingkatkan untuk semua sifat margin ialah "margin":
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>Jalankan program untuk mencubanya keluar
Atribut margin boleh mempunyai satu hingga empat nilai
margin:25px 50px 75px 100px;
Jing atas ialah 25px
Jing kanan ialah 50px
Jing bawah ialah 75px
Jing kiri ialah 100px
margin
margin
:25px;Kesemua 4 jidar ialah 25px<🎜
Lagi contoh
Tetapkan margin menggunakan nilai sentimeter dan peratusan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网（php.cn）</title>
<style>
p{background-color: #8de943
}
p.ex1 {margin-top:2cm;}
p.bottommargin {margin-bottom:25%;}
</style>
</head>
<body>
<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个2厘米上边距的段落。</p>
<p class="bottommargin">这是一个用百分比设置的下边距大小的段落。</p>
</body>
</html>Jalankan program untuk mencubanya
