Tafsiran sifat jidar CSS: jidar atas, jidar kanan, jidar bawah dan jidar kiri

Tafsiran sifat jidar CSS: jidar atas, jidar kanan, jidar bawah dan jidar kiri, contoh kod khusus diperlukan

Dalam CSS, jidar ialah sifat yang digunakan untuk mengawal ruang antara unsur . Margin mencipta ruang putih di atas, ke kanan, di bawah dan kiri elemen, menjadikan reka letak elemen pada halaman lebih fleksibel dan teratur. Artikel ini akan memperkenalkan sifat margin dalam CSS secara terperinci: margin-atas, margin-kanan, margin-bawah dan margin-kiri, dan memberikan beberapa contoh kod khusus untuk menggambarkan penggunaannya. Atribut

1. margin-top
   margin-top digunakan untuk menetapkan jidar atas elemen. Ia mengawal jarak antara elemen dan elemen di atasnya. Berikut ialah contoh kod:

<style>
    .box {
        margin-top: 20px;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div class="box"></div>

Dalam kod di atas, kami menetapkan margin atas 20 piksel untuk elemen, supaya terdapat jurang 20 piksel antara elemen dan elemen di atasnya.

2. sifat margin-kanan
   sipat margin-kanan digunakan untuk menetapkan jidar kanan elemen. Ia mengawal jarak antara elemen dan elemen di sebelah kanannya. Berikut ialah contoh kod:

<style>
    .box {
        margin-right: 20px;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div class="box"></div>

Dalam kod di atas, kami menetapkan margin kanan 20 piksel untuk elemen, supaya terdapat jurang 20 piksel antara elemen dan elemen di sebelah kanannya. Atribut

3. margin-bottom
   margin-bottom digunakan untuk menetapkan jidar bawah elemen. Ia mengawal jarak antara elemen dan elemen di bawahnya. Berikut ialah contoh kod:

<style>
    .box {
        margin-bottom: 20px;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div class="box"></div>

Dalam kod di atas, kami menetapkan margin bawah 20 piksel untuk elemen, supaya terdapat jurang 20 piksel antara elemen dan elemen di bawahnya. Atribut

4. margin-left
   margin-left digunakan untuk menetapkan jidar kiri elemen. Ia mengawal jarak antara elemen dan elemen di sebelah kirinya. Berikut ialah contoh kod:

<style>
    .box {
        margin-left: 20px;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div class="box"></div>

Dalam kod di atas, kami menetapkan jidar kiri sebanyak 20 piksel untuk elemen, supaya terdapat jurang 20 piksel antara elemen dan elemen di sebelah kirinya.

Selain menggunakan sifat jidar yang berasingan untuk melaraskan jarak antara elemen dan elemen lain, kami juga boleh menggunakan sifat jidar yang disingkatkan untuk menetapkan jidar atas, kanan, bawah dan kiri pada masa yang sama. Berikut ialah contoh kod:

<style>
    .box {
        margin: 20px;
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

<div class="box"></div>

Dalam kod di atas, kami menetapkan jidar atas, kanan, bawah dan kiri sebanyak 20 piksel untuk elemen, supaya terdapat jarak 20 piksel antara elemen dan elemen sekelilingnya.

Ringkasnya, atribut margin margin-atas, margin-kanan, margin-bawah dan margin-kiri dalam CSS boleh membantu kami mengawal jarak antara elemen secara fleksibel untuk mencapai matlamat reka letak halaman. Dengan memahami dan menggunakan sifat ini secara fleksibel, kami boleh menguasai teknik reka letak CSS dengan lebih baik. Saya harap contoh kod yang disediakan dalam artikel ini akan membantu pembaca.

Atas ialah kandungan terperinci Tafsiran sifat jidar CSS: jidar atas, jidar kanan, jidar bawah dan jidar kiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!