Padding, Abstand zwischen zwei Elementen.

Und zwar bin ich ein totaler anfänger und lerne es erst seit einer Woche. Wir haben eine Aufgabe gestellt bekommen vom Lehrer eine Html seite zu bauen. Es hat einen Kopf , einen Nav menü einen Inhaltscontainer und eine footer. In seiner Aufgaben stellung steht, das man zwischen allen Listenelementen, Übersnächriffen und Absätzen einen Abstand von 15 px haben soll. Wäre das dann nicht padding: 0px 0px 15px 0 px? Jemand meinte ich soll das für jede Box machen? Was ist genau gemeint? VIELEN Dank achon mal jetzt für sie Hilfe

Zitat von MrMurphy

Hallo

Bei so einer Formulierung sind in aller Regel die Außenabstände gemeint. Dafür gibt es statt padding dann margin. Also zum Beispiel:

Code

h1 {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      h2 {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      h3 {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      h4 {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      h5 {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      h6 {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      p {
         margin-top: 15px;
         margin-bottom: 15px;
      }
      li {
         margin-top: 15px;
         margin-bottom: 15px;
      }

Alles anzeigen

oder zusammengefaßt

Code

h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      li {
         margin-top: 15px;
         margin-bottom: 15px;
      }

Alles anzeigen

oder zusammengefasst mit weniger Absätzen

Code

h1, h2, h3, h4, h5, h6, p, li {
         margin-top: 15px;
         margin-bottom: 15px;
      }

Da jeweils 15px oben und unten angegeben werden mag es so erscheinen, als ob die Elemente einen Abstand von 30px haben.

Durch die sogenannten "collapsing margins", die fest zum HTML / CSS gehören, rutschen obere und untere margins (nicht die seitlichen) immer eineinander und es bleibt nur das größere margin übrig. Da in diesem Fall beide 15px haben halt einmal die 15px.

Wenn ein margin-bottom mit 12px und ein margin-top mit 7px aufeinandertreffen beträgt der Abstand 12px.

Das gleiche gilt wenn ein margin-bottom von 7px und ein margin-top von 12px aufeinandertreffen, es bleiben 12px. Entscheidend ist somit allein der größere margin, bei zwei gleichgroßen fällt einer weg.

Das ist fest in den HTML- und CSS-Regeln hinterlegt, wird von jedem Browser so gehandhabt und sorgt bei Anfängern oft für Verdruß. Das gilt aber nur für margins und nicht für andere Abstände wie padding und border. Und nur für obere und untere margins, nicht für seitliche.

Gruss

MrMurphy

Alles anzeigen

Vielen Dank!!!!!