masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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简写属性。在一个声明中设置所有外边距属性。
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

< . ialah 75px


margin

: 25px 50px; >

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


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492900 permainan