Bagaimana untuk menetapkan kedudukan kotak dalam html

Dalam HTML, gunakan atribut atas, bawah, kiri dan kanan untuk menetapkan kedudukan elemen berbanding dengan elemen induknya, atribut margin untuk menetapkan jarak antara elemen dan elemen sekelilingnya dan atribut padding untuk ditetapkan jarak antara kandungan unsur dan sempadan dalamannya.

Cara untuk menetapkan kedudukan kotak menggunakan HTML

Dalam HTML, anda boleh menetapkan kedudukan kotak melalui pelbagai atribut, termasuk:

• atas, ,kiri,bawah : Menentukan jarak kotak berbanding bahagian atas, bawah, kiri atau kanan elemen induknya.
• margin: Menentukan jarak antara kotak dan elemen sekelilingnya.
• padding: Menentukan jarak antara kandungan kotak dan sempadan dalamannya.

Yang berikut menerangkan penggunaan atribut ini secara terperinci:

atas, bawah, kiri, kanan

Empat atribut ini digunakan untuk menentukan jarak kotak berbanding elemen induknya. Unit boleh menjadi piksel (px), peratusan (%) atau unit panjang sah lain.

Contoh:

<code class="html"><div style="top: 10px; left: 20px;">我的盒子</div></code>

Ini akan mencipta kotak 10px dari atas dan 20px dari sebelah kiri elemen induknya. Sifat margin

margin

digunakan untuk menentukan jarak antara kotak dan elemen sekelilingnya. Ia boleh menerima empat nilai, mewakili jarak atas, kanan, bawah dan kiri. Ia juga mungkin untuk menetapkan semua margin secara serentak menggunakan satu nilai.

Contoh:

<code class="html"><div style="margin: 10px;">我的盒子</div></code>

Ini akan mencipta kotak dengan 20px ruang di sekeliling semua jidarnya sebanyak 10px. Sifat

padding

padding digunakan untuk menentukan jarak antara kandungan kotak dan sempadan dalamannya. Ia boleh menerima empat nilai, mewakili jarak atas, kanan, bawah dan kiri. Anda juga boleh menggunakan satu nilai untuk menetapkan semua margin secara serentak.

Contoh:

<code class="html"><div style="padding: 10px;">我的盒子</div></code>

Ini akan mencipta kotak dengan 10px ruang di sekeliling kandungannya.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kedudukan kotak dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!