Mengapa Margin Atas pada Elemen Dalaman Menggantikan Div Induknya dan Bagaimana Saya Boleh Membetulkannya?

Penempatan Div Pembalut yang Mempengaruhi Margin-Top

Apabila menggunakan jidar atas pada elemen awal yang boleh dilihat pada halaman, seperti bahagian pengepala , ia secara tidak sengaja boleh menggantikan keseluruhan bahagian. Ini adalah hasil daripada gelagat melata lalai penyemak imbas.

Untuk mengatasi isu ini, penyelesaian adalah dengan melaksanakan peraturan CSS berikut kepada bahagian induk:

overflow: auto;

Dengan menyatakan peraturan ini, bahagian induk akan melaraskan ketinggiannya untuk menampung margin atas elemen dalam, menghalang bahagian daripada ditolak bawah.

Berikut ialah coretan kod yang dikemas kini yang menggabungkan penyelesaian ini:

div#header {
  width: 100%;
  background-color: #eee;
  position: relative;
  overflow: auto;
}

div#header h1 {
  text-align: center;
  width: 375px;
  height: 50px;
  margin: 50px auto;
  font-size: 220%;
  background: url('/images/name_logo.png') no-repeat;
}

Dengan melaksanakan teknik ini, margin atas yang digunakan pada elemen h1 tidak lagi akan menjejaskan kedudukan bahagian pengepala .

Atas ialah kandungan terperinci Mengapa Margin Atas pada Elemen Dalaman Menggantikan Div Induknya dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!