Rumah >hujung hadapan web >html tutorial >Padding HTML
Padding HTML
- PHPzasal
- 2024-09-04 16:50:10961semak imbas
Secara amnya, Padding ialah ruang antara perkara untuk apa sahaja, sama seperti dalam HTML merujuk kepada ruang antara kandungan HTML dan sempadannya. Pelapik HTML juga merupakan harta untuk menggunakan halaman web dengan lebih menarik dan menyerlahkan laman web. Ia juga beberapa jenis seperti padding-top, padding-left, padding-right, padding-bottom, dll. Kami boleh menyelaraskan perkataan atau teks dalam format padding jenis yang serupa. Padding mencipta ruang tambahan dalam elemen HTML, dan margin juga mencipta ruang tambahan untuk elemen HTML. Kami juga menggunakan gaya CSS dan sifatnya untuk semua kawasan pelapik.
Sintaks:
Setiap teg HTML mempunyai atribut dan sifat elemennya. Begitu juga, sintaks juga berbeza, dan ia akan digunakan untuk semua teg HTML lain jika keperluan pengguna memerlukan. Di bawah ialah sintaks asas elemen padding dalam HTML.
<html>
<head>
<style>
.sample
{
Font-size:1 px;
Background-color:green;
Margin:28px;
Padding:30 px;
}
</style>
</head>
<body>
</body>
</html>
Sintaks di atas membantu membuat halaman web sampel dan akan menggunakan gaya padding dalam gaya CSS untuk bahagian kepala dalam HTML. Berdasarkan itu, sintaks akan berbeza-beza jika kita menggunakannya dalam bahagian dan teg lain dalam HTML.
Bagaimana Padding berfungsi dalam HTML?
Berbanding dengan margin, Padding ialah ruang tambahan yang dibuat dalam beberapa elemen HTML, tetapi margin dibuat di luar elemen HTML. Setiap elemen, seperti Padding dan margin, merujuk kepada model kotak yang Padding, margin dan jidar semuanya digabungkan dengan model kotak bekas HTML. Dalam model itu, bahagian tengah kawasan yang digunakan untuk kandungan HTML, iaitu, teks atau imej, video, dsb., dikelilingi dengan beberapa pelapik, jidar dan sempadan jika pengguna memerlukan pembangunan tersuai dalam halaman web.
Kami tidak akan menggunakan semua ini seperti yang diperlukan, tetapi adalah berfaedah untuk mengingati model kotak digunakan pada setiap teg atau elemen pada halaman web. Sesetengah gaya dan sifat CSS membenarkan rentetan nilai yang digantikan dengan bilangan sifat dan ia diwakili dengan nilai yang dipisahkan dengan menggunakan ruang.
Padding dalam kotak dengan kawasan jidar dan sempadan dalam dan di luar kawasan kandungan HTML, sifat padding, digunakan untuk menentukan gaya padding seragam dalam bekas kotak. Tiga atau empat nilai ditentukan secara bebas berdasarkan pengisytiharan kami dalam kod dengan keperluan pelanggan.
Apabila mengira panjang untuk Padding, terdapat nilai tertentu yang dibenarkan untuk dipertimbangkan, memastikan ia tidak negatif; juga, hitung peratusan yang merangkumi lebar dan tinggi kotak dan tidak mempunyai nilai negatif. Kita boleh menggunakan Padding pada bahagian imej untuk halaman web dalam HTML dengan bantuan mencipta penimbal antara imej dan aliran data seperti kandungan HTML. Ia memberikan imej seperti ruang pernafasan kecil, jadi ia tidak tersekat sama ada dalam teks atau imej lain.
Kami biasanya meletakkan imej di sebelah kiri halaman web, melampirkan kandungan data dengan rapat. Tidak ada yang mengganggu dekat dengan gambar. Namun, apabila menggunakan imej yang sama dalam panel kanan, Padding mencipta penimbal antara imej dan teks; ia akan membantu untuk pengalaman membaca yang menyenangkan dari perspektif pengguna. Kami juga boleh menambah Padding dalam kanvas imej menggunakan operasi edit seperti editor HTML dengan beberapa atribut gaya dan bertukar kepada editor teks kaya selepas pengguna memilih imej.
Kami menambah Padding terpilih, seperti jidar 10 piksel, pada semua sisi imej yang kami pilih atau muat naik sebagai kandungan imej ke halaman web berdasarkan arahan pengguna atau pelanggan; juga, kita boleh menambah Padding secara selektif dengan menggunakan beberapa gaya padding seperti pilihan padding-bawah kepada padding-right berdasarkan keperluan pengguna.
4 Nilai Padding
Kami boleh menggunakan Padding dalam fungsi javascript untuk mencipta dan mengubah saiz gaya sempadan atau gaya padding secara automatik selepas memanggil fungsi javascript dalam kod HTML. Secara amnya, sifat padding menetapkan atau mengembalikan Padding unsur HTML yang diambil oleh harta itu daripada satu nilai sehingga empat nilai; kami akan membincangkan setiap nilai padding di bawah.
- Nilai tunggal: Contoh seperti div{padding:12px}-semua empat sisi kandungan HTML akan mempunyai nilai padding seperti 12 px.
- Dua nilai: div{padding:12px 13px}-padding atas dan bawah ialah 12px, dan padding kiri dan kanan ialah 13px.
- Tiga nilai: div{padding:12px 13px 14px}-Padding atas ialah 10px, Padding kiri dan kanan ialah 13px, dan Padding bawah ialah 14px.
- Empat nilai: div{padding:12px 13px 14px 15px}-Padding atas ialah 12px, Padding kanan ialah 13px, Padding bawah ialah 14px dan Padding kiri ialah 15px.
Contoh Padding HTML
Contoh Padding HTML diberikan di bawah:
Contoh #1
Kod:
<html>
<head>
<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>
</body>
</html>
Output:
Example #2
Code:
<html>
<head>
<style>
.sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<img src="download.jpg" style="padding:33px;float:left">
<p class="sample">Welcome To My Domain</p>
<p class="sample2">Welcome To My Domain</p>
<p><strong>Welcome</strong>To My Domain User!</p>
</body>
</html>
Output:
Example #3
Code:
<html>
<head>
<style>
#sample {
border: 2px solid green;
padding: 34px;
}
.sample2 {
border: 4px solid green;
margin: 37px;
}
</style>
</head>
<body>
<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">To My Domain</button>
<script>
function samples() {
document.getElementById("sample").style.padding = "2px 3px 4px 5px";
}
</script>
</body>
</html>
Output:
The first example illustrates the fundamental concept of Padding. In the second example, we incorporate additional images into the web pages using padding styles. The final example is using javascript functions to set or resize the padding styles automatically.
Conclusion
We already discussed some HTML concepts in real-time scenarios, whichever we are using HTML tags in web pages, not only in web mode but also on user compatibility; it will accept the mobile (both android and ios) modes based on user requirements.
Atas ialah kandungan terperinci Padding HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!