Bagaimana untuk menetapkan jarak antara kotak teks dalam html

Tetapkan jarak antara kotak teks dalam HTML: Gunakan sifat jidar CSS untuk menetapkan jarak antara kotak teks dan elemen sekeliling. Gunakan sifat padding dan jidar model kotak CSS untuk melaraskan saiz dan lebar jidar kotak teks, secara tidak langsung meningkatkan jarak antara kotak teks.

Cara untuk menetapkan jarak antara kotak teks dalam HTML

Dalam HTML, anda boleh menetapkan jarak antara kotak teks untuk meningkatkan reka letak antara muka pengguna dan kebolehbacaan.

Gunakan sifat jidar CSS

margin Sifat itu digunakan untuk menetapkan jarak antara elemen dan elemen sekeliling. Untuk kotak teks, anda boleh menggunakan ini untuk menetapkan jarak antara kotak teks dan elemen lain, seperti label atau kotak teks lain.

Tatabahasa:

<code>margin: top right bottom left;</code>

Di mana:

• atas: Jarak di atas kotak teks
• kanan: Jarak di sebelah kanan kotak teks
• teks di bawah Jarak bawah
• kiri:
Teks Jarak ke kiri kotak

Anda boleh menetapkan nilai ini kepada piksel (px), peratusan (%) atau unit lain.

Contoh:

<code class="html"><input type="text" style="margin: 10px;"></code>

Ini akan menetapkan jidar 10 piksel pada kotak teks, mengekalkannya 10 piksel dari unsur sekeliling.

Menggunakan Model Kotak CSS

Model kotak CSS menganggap elemen sebagai segi empat tepat yang terdiri daripada kandungan, padding, jidar dan jidar. Jarak antara kotak teks boleh ditetapkan dengan melaraskan sifat model kotak.

padding: Atribut padding mentakrifkan jarak antara kandungan elemen dan sempadan. Menambahkan padding

meningkatkan saiz kotak teks, dengan itu secara tidak langsung meningkatkan jarak antara mereka.

sempadan: Atribut sempadan mentakrifkan lebar dan gaya sempadan elemen. Menambahkan sempadan

lebar mewujudkan jurang antara kotak teks.

Contoh:

<code class="html"><input type="text" style="padding: 10px; border: 1px solid;"></code>

Ini akan menambah 10 piksel pelapik dan 1 piksel jidar pada kotak teks, sekali gus meningkatkan jarak menegak antara mereka. 🎜

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