Bagaimana untuk Menghapuskan Margin Tidak Dijangka Di Atas Pengepala dalam HTML dan CSS?

Menghapuskan Margin Tidak Diingini Di Sekitar Pengepala

Dalam percubaan untuk meminimumkan ruang yang tidak diingini di atas pengepala, coretan HTML dan CSS telah diperkenalkan :

body {
  margin: 0px;
  padding: 0px;
}

header {
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
}

<header>
  <h1 id="OQ-Online-Judge">OQ Online Judge</h1>
  <form action="<?php%20echo%20base_url();%20?>%20/index.php/base/si" method="post">
    <label for="email1">E-mail : </label>
    <input type="text" name="email">
</form></header>

Walaupun menetapkan margin dan

elemen kepada sifar, margin bukan sifar masih muncul. Ruang misteri ini timbul daripada keruntuhan jidar.

Memahami Keruntuhan Margin

Keruntuhan jidar berlaku apabila elemen tertentu dengan jidar bersebelahan runtuh menjadi satu jidar. Ini biasanya diperhatikan dengan elemen dalam bekas peringkat blok. Dalam keadaan ini, dan

elemen ialah kedua-dua elemen peringkat blok.

Penyelesaian: Menggunakan Margin pada Elemen Pengepala Tertentu

Untuk menghapuskan margin yang tidak diingini, gunakan margin sifar pada yang khusus elemen pengepala yang menyebabkan isu. Dalam kes ini, ia ialah

elemen dalam pengepala.

h1 {
    margin-top: 0;
}

Dengan menetapkan sifat jidar atas

elemen kepada sifar, keruntuhan jidar dipecahkan dan ruang yang tidak diingini di atas pengepala dihapuskan.

Atas ialah kandungan terperinci Bagaimana untuk Menghapuskan Margin Tidak Dijangka Di Atas Pengepala dalam HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!