Rumah >hujung hadapan web >html tutorial >HTML jidar-kiri
HTML jidar-kiri
- 王林asal
- 2024-09-04 16:48:19775semak imbas
HTML margin-left menetapkan kawasan margin di sebelah kiri elemen. HTML mempunyai banyak teg pra-takrif yang digunakan untuk mencipta halaman web dengan lebih berkesan, dan tambahan pula, gaya CSS lebih maju dan dihiasi dalam tapak web. Dengan menggunakan istilah ini, pengguna akan menarik tapak web dengan lebih kerap, jadi ia berguna untuk perspektif perniagaan. Sifat jidar html ialah salah satu ciri yang membantu untuk mencipta ruang luar skrin web HTML, dan tambahan pula, ia mempunyai beberapa jenis yang berbeza seperti jidar kiri, jidar kanan, jidar atas dan jidar bawah; ini adalah beberapa jenis untuk menentukan susun atur ruang garis besar pada halaman web. Setiap jenis mempunyai nilai panjang yang mungkin.
Sintaks:
Margin html mempunyai gaya yang berbeza berdasarkan tempat kami menggunakannya dalam dokumen. Jika kita menggunakan jidar HTML, dokumen gaya CSS digunakan untuk jidar.
<html>
<head>
<style>
div
{
Margin:values;
}
</style>
</head>
</html>
Kod di atas ialah sintaks asas yang akan kami bincangkan pada gaya margin HTML halaman web. Dalam HTML, corak dom digunakan terutamanya untuk objek HTML yang akan berfungsi pada hujung belakang kod. Jidar HTML bergantung pada elemen dengan jidar berbeza digunakan pada dokumen halaman web. Kita boleh menggunakan fungsi javascript untuk menetapkan margin secara automatik pada halaman web.
Bagaimanakah HTML Margin-left Berfungsi?
Pinggir menentukan panjang tetap menggunakan unit gaya standard HTML dan CSS; malah nilai negatif dibenarkan pada halaman web. Sebelum itu, kami akan menetapkan harta margin-kiri untuk mempunyai beberapa nilai, kedua-duanya akan kami tetapkan atau nilai lalai yang diberikan dalam dokumen. Nilai lalai ialah "auto", atau jika tidak, kami akan mengisytiharkan nilai sebagai "warisan," "panjang" dan "peratusan" Setiap nilai yang ditentukan dengan set subnilai yang berbeza berdasarkan akan menggunakan sifat kiri margin nilai.
Panjang akan mengira panjang atau panjang tetap unit CSS. Kami mengira peratusan lebar dan ketinggian berdasarkan blok HTML. Medan ini juga membenarkan nilai negatif. Jika andaikan margin mempunyai atribut nilai tertinggi, pelayar pengguna akan mengambil nilai sebagai peratusan lebar; ia tidak akan menyatakan ketinggian blok.
Pelayar pengguna akan mengira auto nilai margin-kiri; ia bergantung pada ruang yang tersedia di kawasan luar dokumen atau halaman web. Nilai warisan digunakan terutamanya untuk perhubungan ibu bapa-anak kandungan HTML; ia menentukan lebar harta margin-kiri dengan nilai. Apabila mengira ketinggian dan lebar elemen HTML dalam halaman web, kami terutamanya tidak memasukkan margin untuk pengiraan itu; kami menyertakan elemen HTML lain seperti padding, kawasan kandungan lain, sempadan, dsb. Hanya kira ruang yang tersedia bagi sifat saiz margin elemen HTML dokumen.
Andaikan kita mengisytiharkan dua set margin dalam HTML yang bertembung. Sebagai contoh, kami menetapkan satu blok dengan jidar kanan dan titik terapung hanya di sebelah kanan dan satu lagi blok dengan jidar kiri yang sama dengan titik terapungnya. Titik margin yang lebih besar kekal tidak berubah dan tidak beralih kepada nilai yang lebih kecil. Dalam kes ini, kawasan jidar blok yang lebih kecil runtuh dan mungkin tidak dipaparkan dengan betul pada halaman web, berpotensi hilang daripada skrin web. Secara amnya, margin adalah telus.
Kami menggunakan margin sebagai sifat trengkas untuk menentukan lebar dan bukannya menggunakan spesifikasi margin lain dalam kod kelompok. Pendekatan ini memudahkan membaca kod di kawasan pembangun. Kadangkala, kami mungkin menetapkan nilai margin-bawah seperti dalam jenis margin lain. Sebagai contoh, kami membezakan satu kelas daripada kelas lain dalam gaya CSS. Kami boleh menentukan nilai panjang yang mungkin bagi setiap sifat di mana-mana sahaja yang kami gunakan dalam nilai panjang elemen tag HTML adalah sama dan berkaitan dengan ketinggian fon teks dan fon elemen.
Apabila menambahkan objek pada halaman web dalam IE 4 atau versi yang lebih baru, nilai margin menjadi mutlak dalam dokumen HTML, dan bukannya menganggap nilai lalai IE versi 3 untuk margin objek dalam mod keserasian apabila menggunakan penyemak imbas. Nilai sifat margin tidak disokong dalam elemen jadual HTML
tag dalam versi IE 4.
Contoh HTML margin-kiri
Di bawah ialah contoh HTML margin-kiri:
Contoh #1
Kod:
<html>
<head>
<style>
{
margin: 2;
}
div {
width: 210px;
height: 130px;
background:green;
border-radius: 13px;
}
.sample {
background-color: green;
margin-left: 3%;
}
.sample1 {
background-color: yelllow;
}
.sample2 {
background-color: solid green;
margin-left: -13%;
}
</style>
</head>
<body>
<div id="sample2">
<marquee> Welcome To My Domain</marquee>
</div>
</body>
</html>
Output:
Contoh #2
Kod:
<html>
<head>
<style>
#sample {
width: 120%;
}
table, td, th {
border: 3px solid green;
}
table {
width: 212px;
float: left;
margin: 23px 42px;
}
</style>
</head>
<div id="sample">
<table>
<tr>
<th>Mobile Number</th>
<th>Name</th>
</tr>
<tr>
<td>8220244056</td>
<td>Siva</td>
</tr>
<tr>
<td>9075854876</td>
<td>Raman</td>
</tr>
</table>
<p>
<marquee>Welcome To My Domain</marquee>
</p>
</div>
</html>
Output:
Contoh #3
Kod:
<html>
<head>
<style>
#sample {
width: 120%;
}
table, td, th {
border: 3px solid green;
}
table {
width: 212px;
float: left;
margin: 23px 42px;
}
</style>
</head>
<div id="sample">
<table>
<tr>
<th>Mobile Number</th>
<th>Name</th>
</tr>
<tr>
<td>8220244056</td>
<td>Siva</td>
</tr>
<tr>
<td>9075854876</td>
<td>Raman</td>
</tr>
</table>
<button type="button" onclick="samples()">Set margin</button>
</div>
<script>
function samples() {
document.getElementById("sample").style.margin-left = "11px 23px 34px 47px";
}
</script>
</html>
Output:
Tiga contoh di atas akan memberikan tiga kegunaan berbeza bagi sifat margin; contoh pertama menggunakan sifat margin penting untuk penggayaan CSS dan HTML. Contoh kedua mencipta jadual HTML dan menetapkan nilai harta margin kiri halaman web. Contoh terakhir mengikuti proses yang sama, tetapi JavaScript secara automatik menetapkan nilai margin.
Kesimpulan
Dalam HTML, kami telah melihat jenis sifat margin sebagai margin-kiri; berdasarkan itu, kami telah mengubah jadual HTML, imej dan video; juga, kami akan menyelaraskan dan menetapkan susun atur sebagai margin-kiri dalam dokumen HTML. Sesetengah elemen tidak menyokong HTML5 dalam keserasian penyemak imbas.
Atas ialah kandungan terperinci HTML jidar-kiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!