Jidar CSS (margin)
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 | 簡寫屬性。在一個(gè)聲明中設(shè)置所有外邊距屬性。 |
| margin-bottom | 設(shè)置元素的下外邊距。 |
| margin-left | 設(shè)置元素的左外邊距。 |
| margin-right | 設(shè)置元素的右外邊距。 |
| margin-top | 設(shè)置元素的上外邊距。 |
Instance
Tetapkan margin pada sisi yang berbeza
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>這是一個(gè)沒有指定邊距大小的段落。</p>
<p class="margin">這是一個(gè)指定邊距大小的段落。</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中文網(wǎng)(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>
<body>
<p>這是一個(gè)沒有指定邊距大小的段落。</p>
<p class="margin">這是一個(gè)指定邊距大小的段落。</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
< . ialah 75px
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中文網(wǎng)（php.cn）</title>
<style>
p{background-color: #8de943
}
p.ex1 {margin-top:2cm;}
p.bottommargin {margin-bottom:25%;}
</style>
</head>
<body>
<p>一個(gè)沒有指定邊距大小的段落。</p>
<p class="ex1">一個(gè)2厘米上邊距的段落。</p>
<p class="bottommargin">這是一個(gè)用百分比設(shè)置的下邊距大小的段落。</p>
</body>
</html>Jalankan program untuk mencubanya
