Mit und ohne Border

[wiederverwendBar]

Hallo,

ich habe mich nun längere Zeit nicht mehr mit HTML und CSS beschäftigt. Bis vor ca. 1 Jahr hab ich das noch sehr intensiv gemacht.

Vermutlich ist mein "Fehler" nur ein Flüchtigkeitsfehler, aber ich bekomme ihn nicht los.

Ein Elemnt, in diesem Fall ein <div>, bekommt die Hintergrundfarbe #113C5E. In dem <div> gibts ein <ul> mit 6 <li>'s. Die <li>'s bekamen, damit sie nebeneinander stehen, display:inline zugewiesen.
Die Hintergrundfarbe des <div>'s füllt nur die Höhe des Textes aus.
Sobald ich dem <div> aber eine 1px starke Border gebe, bekommt das <div> in seiner vollen Höhe die Hintergrundfarbe.
Ebenso, wenn das <div> keine Border, aber das <ul> eine 1px-Border bekommt.

Das war meines Wissens noch nie so und verwirrt mich gerade total. Habe ich noch nicht erlebt. Ein <div> wurde früher immer in der vollen Höhe mit der Hintergrundfarbe ausgefüllt... Woran liegt das, und wie bekomme ich es los?

Freundliche Grüße
wiederverwendBar