Warum ist `body { margin: 0; }` Den oberen Rand meines Logos entfernen?-CSS-Tutorial-php.cn

Warum ist `body { margin: 0; }` Den oberen Rand meines Logos entfernen?

Patricia Arquette

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

Original

174 Leute haben es durchsucht

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

Fehlerbehebung beim Entfernen von Rändern in CSS

Wenn unerfahrene Programmierer bei der Webentwicklung auf Randprobleme stoßen, fragen sie sich möglicherweise, ob die folgende CSS-Regel angemessen ist:

body {
  margin: 0;
}

Nach dem Login kopieren

Problemstellung

Anwenden Der obige Code zum Eliminieren des Abstands zwischen der Oberseite des Browsers und dem „Logo“-Text erweist sich als erfolglos. Der folgende Code ist als Referenz auf jsbin verfügbar:

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

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

Nach dem Login kopieren

Antwort

Während die bereitgestellte CSS-Regel dazu gedacht ist, den Rand des Körpers zu entfernen, ist dies möglicherweise nicht der Fall ideale Lösung in diesem Szenario. Die Verwendung eines globalen Resets wie diesem:

* {
  margin: 0;
  padding: 0;
}

Nach dem Login kopieren

kann unbeabsichtigte Folgen haben. In diesem speziellen Fall ragt der Rand der „Logo“-Überschrift über das übergeordnete Element hinaus, da im übergeordneten Element keine Polsterung vorhanden ist.

Ein gezielterer Ansatz wird empfohlen:

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

Nach dem Login kopieren

Festlegen der Die Polsterung des übergeordneten Elements stellt sicher, dass der „Logo“-Rand innerhalb des übergeordneten Elements bleibt. Das Entfernen aller Ränder und Abstände kann unvorhergesehene Auswirkungen haben, sodass es besser ist, sich auf das spezifische Element zu konzentrieren, als auf einen globalen Reset zurückzugreifen.

Das obige ist der detaillierte Inhalt vonWarum ist `body { margin: 0; }` Den oberen Rand meines Logos entfernen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!