Überschrift im div

obwohl die div Elemente margin:0 haben, sehen wir zwischen den beiden div Elementen einen Außenabstand. Der Außenabstand wird durch das margin der h1 bestimmt. Da das Eltern-div der h1 kein padding und kein border hat, kann das margin der Überschrift nicht an die Innenkante des Eltern-div Elementes anstossen und stößt somit an das erste div. Fügt man dem div Element ein padding oder border hinzu, würde das margin der h1 an die Innenkante des Eltern-div Elementes anstoßen.

CSS

body {
background-color: #70c9c9;
margin: 0;
}

h1 {
margin: 10px;
}

div {
background-color: antiquewhite;
}

HTML

<div>erstes </div>

<div><h1>Überschrift im div</div>