CSS: Alih keluar jidar badan

Question

Saya baru dalam pembangunan web dan menghadapi masalah mengalih keluar jidar badan.

Terdapat ruang antara bahagian atas penyemak imbas dan teks "logo". Kod saya ada pada jsbin.

Jika saya ingin membuang ruang, body { margin: 0;} adakah itu salah?

Answer 1

Sesetengah elemen HTML mempunyai margin yang telah ditetapkan (iaitu: body、h1 到 h6、p、 >fieldset、form、ul、ol、dl、dir >、菜单、块引用和dd).

Dalam kes anda, ya h1 导致了您的问题。默认情况下它具有 { margin: .67em } . Jika anda menetapkannya kepada 0, ia akan mengalih keluar ruang.

Untuk menyelesaikan masalah seperti ini, saya syorkan anda menggunakan Alat Pembangun penyemak imbas anda. Untuk kebanyakan penyemak imbas: Klik kanan elemen yang anda ingin ketahui lebih lanjut dan pilih "Periksa Elemen." Di bahagian paling bawah tab Gaya, anda mempunyai model kotak CSS. Ini ialah alat yang hebat untuk memvisualisasikan jidar, pelapik dan jidar serta elemen yang menjadi punca isu penggayaan anda.

Answer 2

Saya akan mengatakan bahawa menggunakan tetapan semula global adalah cara yang teruk untuk menyelesaikan masalah ini.

* {
  margin: 0;
  padding: 0;
}

Sebab margin h1 timbul daripada ibu bapa adalah kerana ibu bapa tidak mempunyai padding.

Jika anda menambah padding pada elemen induk h1, margin akan berada di dalam elemen induk.

Menetapkan semula semua padding dan margin kepada 0 boleh menyebabkan banyak kesan sampingan. Maka lebih baik untuk mengalih keluar margin untuk tajuk tertentu itu.