|
Dafür gibt es einen Grund.
Wenn das Bild inline ist, wird es sozusagen wie Text dargestellt. Die untere Kante des Bildes wird auf der sogenannten Baseline gesetzt.
Die Baseline ist die Linie, auf der die meisten Buchstaben ruhen. Aber das reicht nicht, weil unser Alphabet auch Buchstaben enthält, die unter der Baseline noch Platz brauchen -- "g", "p", "j", "q" und "y". Die Baseline befindet sich also einige Pixel über der unteren Kante der Textzeile. Ein inline-Bild zählt praktisch als Text, also fängt das untere Margin erst an der unteren Kante der Zeile -- nicht des Bildes -- an.
Mit display:block wird das Bild aus dem Textfluss herausgenommen. So gibt es keine Textzeile mehr und die untere Kante des Bildes ist gleichzeitig auch die untere Kante des Elements.
|
