Unerkläricher Außenabstand?

Woher kommt der Außenabstand

Hier wurde dem Elternelement header ein padding zugwiesen und dem Elternelement main ein border von 1px. Dadurch stößt das margin, von h2 jeweils an die Innenkante und es erscheint keine Lücke mehr zwischen den Elementen und dem Außenrand.

        body, header, main{margin:0;}       
        header{background-color: #88DDE1; padding:1px;}
        main{background-color: #fec; border: 1px solid;} 

Im body liegt ein header und darunter ein main.

Es liegt daran, dass das margin, der Überschriften, welches vom Browserstylesheet zugewiesen wurde, nicht an die Innenkante, des headers und des main Elements anstößt, weil diese Elternelemente weder padding noch border haben.

zurück zum Tipp