Mengapa Bukan `body { margin: 0; }` Mengalih keluar Margin Atas Logo Saya?-tutorial css-php.cn

Mengapa Bukan `body { margin: 0; }` Mengalih keluar Margin Atas Logo Saya?

Patricia Arquette

Lepaskan： 2024-12-28 08:54:10

asal

167 orang telah melayarinya

Why Isn't `body { margin: 0; }` Removing My Logo's Top Margin?

Menyelesaikan Masalah Pembuangan Margin dalam CSS

Apabila menghadapi isu margin dalam pembangunan web, pengaturcara baru mungkin tertanya-tanya sama ada peraturan CSS berikut sesuai:

body {
  margin: 0;
}

Salin selepas log masuk

Masalah Kenyataan

Menggunakan kod di atas untuk menghapuskan jarak antara bahagian atas penyemak imbas dan teks "logo" terbukti tidak berjaya. Kod berikut tersedia untuk rujukan pada jsbin:

<head>
  <style>
    body {
      margin: 0;
    }
  </style>
</head>

<body>
  <div class="logo">
    <h1>Logo</h1>
  </div>
</body>

Salin selepas log masuk

Jawapan

Walaupun peraturan CSS yang disediakan bertujuan untuk mengalih keluar jidar badan, ia mungkin bukan penyelesaian yang ideal dalam senario ini. Menggunakan tetapan semula global seperti ini:

* {
  margin: 0;
  padding: 0;
}

Salin selepas log masuk

boleh mendatangkan akibat yang tidak diingini. Dalam keadaan tertentu ini, jidar tajuk "logo" menonjol melebihi elemen induknya kerana ketiadaan padding dalam induk.

Pendekatan yang lebih disasarkan disyorkan:

.logo {
  padding: 10px;
  margin: 0;
}

Salin selepas log masuk

Menetapkan padding ibu bapa memastikan bahawa margin "logo" kekal dalam ibu bapa. Mengalih keluar semua jidar dan pelapik boleh mendatangkan kesan yang tidak dijangka, menjadikannya lebih baik untuk memfokus pada elemen tertentu daripada menggunakan tetapan semula global.

Atas ialah kandungan terperinci Mengapa Bukan `body { margin: 0; }` Mengalih keluar Margin Atas Logo Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!