Padding HTML vs Margin

Dalam HTML, margin dan padding ialah dua elemen yang digunakan untuk menjarakkan elemen dalam kandungan HTML. Margin ialah ruang luar elemen dalam HTML, dan padding ialah ruang dalam elemen, tetapi kedua-dua konsep akan menyasarkan kerumitan ruang elemen HTML. Semua set tag elemen HTML menggunakan padding dan margin untuk menentukan atribut dan tingkah laku mereka. Ia juga mengiktiraf cara untuk dokumen HTML seperti halaman web menjadi lebih menarik daripada perspektif pengguna.

Perbandingan Head to Head antara Padding HTML dan  Margin (Infografik)

Di bawah ialah 6 perbandingan teratas antara HTML Padding vs Margin:

Perbezaan utama antara Padding HTML dan Margin

Mari kita bincangkan beberapa perbezaan utama antara HTML Padding vs Margin dalam perkara berikut:

• Pelapik dan jidar HTML mewakili dua sifat yang dikaitkan dengan ruang dan sempadan dalam elemen HTML. Kedua-dua padding dan margin digunakan untuk gaya CSS; apabila kita menggunakan gaya CSS dalam kedua-dua atribut, ia akan mempunyai gelagatnya.
• Pengguna harus mengaitkan elemen tertentu dengan atribut pelapik untuk mencapai ruang pada bahagian dalam elemen berdasarkan keperluan pengguna. Margin juga adalah perkara yang sama dalam padding, tetapi ruang berada di sebelah luar dokumen untuk halaman web berdasarkan spesifikasi pengguna.
• Margin mempunyai jenis yang berbeza seperti bahagian atas, bawah, kiri dan kanan jika kami menentukan jenis jidar dokumen HTML. Jika kami menggunakan gaya CSS dalam jidar HTML dan padding, gaya tersebut akan menjadi lebih berkuasa di halaman web.
• Menetapkan nilai atas margin HTML di bahagian atas elemen hendaklah ditentukan dengan panjang atau peratusan. Nilai anak menentukan dan merujuk kepada lebar elemen induk, lapan daripada kandungan HTML. Dalam ciri jadual HTML, kami menggunakan pelapik dalam HTML, yang mempunyai jenis yang berbeza, seperti pelapik sel dan jarak sel.
• Menetapkan nilai padding sel dan jarak sel dalam jadual HTML akan menentukan kedua-dua ruang mendatar dan menegak untuk sifat CSS jadual. Kadangkala sifat jarak sel tidak berfungsi dengan versi Internet Explorer seperti 7,8,9 dsb.; menggunakan atribut jarak sempadan dan bukannya jarak sel boleh meningkatkan mod keserasian pengguna. Nilai nol ditentukan untuk atribut jarak sempadan dan ia juga boleh menampung nilai berpotensi lain, menjadikannya lebih berfaedah untuk atribut jarak sel.
• Kita boleh menyebut bahawa nilai atribut dalam jadual HTML ialah contoh asas jarak sel, jarak sempadan dan keruntuhan sempadan; ini adalah atribut yang sama yang kami gunakan dalam jadual HTML untuk lebih menarik di bahagian hadapan.
• Berdasarkan itu, kami juga menyebut padding dan ruang margin dalam jadual HTML yang sama. Kami juga menggunakan
  teg sebagai teg pratakrif dalam HTML, tetapi kami juga menggunakan ruang padding dan ruang margin dalam teg div bersarang, jika boleh, dalam skrin pengguna.
• Apabila kami menggunakan teg div dalam jadual HTML, kami membungkus data dalam sel jadual, tetapi apabila kami mengisytiharkan ruang padding dan ruang margin dalam teg div jadual HTML, setiap sel jadual lajur mendapat seragam, atau format pesanan menaik dalam skrin hujung hadapan.

Jadual Perbandingan Padding HTML lwn Margin

Jadual di bawah meringkaskan perbandingan antara HTML Padding vs Margin:

HTML Padding	HTML Margins
It is used to create the space inner side of the web pages in the HTML contents.	The outer side of the HTML contents in the web pages is declared using it.
It has different types like top, bottom, left and right paddings.	There are various types of margins, including top, bottom, left, and right margins.
It is mainly used for the CSS styles on the web pages.	Similarly, within CSS styles and certain HTML contents, margins are commonly utilized for the layout of web pages.
It coordinates and combines with the other HTML tags, which help in the attributes and behavior of the HTML web pages.	It also combines with the other HTML tags, helping in the attributes and behaviors of the HTML web pages.
The padding property sets the padding areas for all the four-sides of the HTML elements.	The margin property sets the margin areas on either top, bottom, left, or right based on the values we specified in the styles of documents.
We can use javascript to set the padding sizes in the web pages automatically.	We also use Javascript to set the margin length on the web pages automatically.

Contoh Padding HTML & Jing HTML

Di bawah ialah contoh Padding HTML & Margin HTML:

Contoh #1 – Padding HTML

Kod:

<html>
<head>
<style>
#sample {
border: 2px solid orange;
padding: 38px;
}
.sample2 {
border: 4px solid orange;
margin: 39px;
}
</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 = "22px 23px";
}
</script>
</body>
</html>

Output:

Dalam contoh di atas, kami menggunakan javascript untuk menetapkan saiz padding dalam halaman web secara automatik; kami mengklik ikon "ke domain saya", dan ia akan mengatur saiz padding.

Contoh #2 – Margin HTML

Kod:

<html>
<head>
<style>
#sample {
border: 2px solid orange;
margin-left: 19%;
}
.sample2 {
border: 4px solid orange;
margin-top: 14%;
}
</style>
</head>
<body>
<div id="sample">Welcome</div>
<br>
<button type="button" onclick="samples()">set margins</button>
<script>
function samples() {
document.getElementById("sample").style.margin = "3%";
}
</script>
</body>
</html>

Output:

Dalam contoh yang sama di atas, kami menggunakan fungsi javascript untuk menetapkan nilai margin apabila kami mengklik butang secara automatik.

Kesimpulan

Pelapik HTML dan margin ialah komponen penting untuk mencipta halaman web yang menarik secara visual dan menggunakan gaya formal dalam panel bahagian hadapan. Ia akan menumpukan pada kandungan profesional yang sepatutnya fleksibel, dan juga, ia akan merancang nilai input pengguna untuk diselaraskan di bahagian belakang dan bahagian hadapan dengan betul. Javascript dan beberapa rangka kerja lain seperti Bootstrap dan perpustakaan jquery bergabung dengan elemen HTML ini.

Atas ialah kandungan terperinci Padding HTML vs Margin. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!