Warum kriege ich als Ergebnis keine 171px(Die Höhe des Elements mit der Rechnung rauskriegen)?
Kann mir bitte jemand sagen, warum die Rechnung nicht aufgeht?
Gestartet hat alles mit diesem Text hier:
Bild 1:>>>>>>>>>>>>>>>>>>>>>>
Weitere Bilder:
Bild 2:>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Bild 3:>>>>>>>>>>>>>>>>>
Bild 4(Absatz 1 und 2 haben die gleichen Werte):>>>>>>>>>>>>>>>>>>>>>>>>>
Bild 5:>>>>>>>>>>>>>>>>>>
Auf Bild 2 kann man sehen, dass die Entwicklerkonsole die Höhe vom Element "article" mit 171px angibt. Wenn man "article" in CSS mit "height 171px" angibt, ändert sich auch nichts. Also muss es stimmen, weil es erst ab 172px größer wird.
Wenn man aber die Rechnung nach Bild 1 befolgt, kriegt man eine ganz andere Höhe. Warum ist das so?
Rechnung:
h1(Überschrift):
Höhe: 77
margin oben/unten 10x2=20
padding oben/unten 20x2=40
border oben/unten 5x2=10
Ergebnis: 77+20+40+10=147
Absatz 1&2:
Höhe 2x18= 36
Ergebnis:
147+36= 183px
Wieso komme ich nicht auf die 171 des Elementes, wie auf Bild 2.
Mache ich etwas falsch?
Falls jemand eine Antwort hat, danke ;)