<li> ... </li> nur im Firefox oben mit Rand

    Hier ein kurzer Quelltext zum Problem:

    <html>

    <body style="margin:0;border-top:black solid 1px">

    <ul>
    <li style="float:left;margin-right:30px;margin-top:0;"></li>
    <li style="float:left;margin-right:30px;margin-top:0;"></li>
    <li style="float:left;margin-right:30px;margin-top:0;"></li>
    <li style="float:left;margin-right:30px;margin-top:0x;"></li>
    </ul>

    </body>

    </html>

    Ohne style="margin:0;border-top:black solid 1px" sieht es so aus:


    Mit so:

    Ich kann mir weder erklären, wo der obere Rand ohne border-top beim body herkommt, noch, warum er mit border-top verschwindet. Vielleicht weiß jemand eine Antwort.
    Im aktuellen Internet-Explorer tritt der Rand nicht auf, egal , ob mit oder ohne Border, nur im aktuellen Firefox (52.02)

    Hallo MrMurphy,
    in der Tat habe ich mit dem Quellcode mein eigentliches Problem nicht dargestellt.
    Es geht um folgendes: Mit Hilfe einer ungeordneten Liste (<ul> <li> ..... ) möchte ich mit :hover und :target in einem bestimmten Bereich unter einer fixierten Überschrift verschiedene Bilder zur Ansicht bringen. Die Peudoklasse :hover leistet dabei, was sie soll. Bei :target scrollt aber die Liste mit den Bildern darunter an den oberen Rand des Body, so dass auch die Bilder unter der fixierten Überschrift verschwinden. Das möchte ich vermeiden. Im Internet habe ich dazu nur Lösungen gefunden, die zumindest mit CSS nicht funktionieren. Javascript möchte ich nicht verwenden.
    Nun habe ich die a-Tags mit dem href-Attribut mit padding soweit vergrößert, dass sie oben unter der Überschrift (z-index und position verwendet) verschwinden und an die obere Grenze des Bildschirms stoßen (sollen). Das hat auch wunderbar geklappt, jedenfalls beim Internetexplorer. Dort bleibt der Bildschirm dann beim Klick auf einen Link auch bis auf den gewünschten Bildwechsel unverändert. Beim Firefox ist oberhalb von der Liste aber noch ein kleiner Außenrand, um den der Bildinhalt bei einem ersten Klick auf einen Link der Liste nach oben scrollt, was beim Vorhandensein eines Abstandes zum Bildschirmrand ja auch zu erwarten ist. Diesen Rand möchte ich aber auch beim Firefox vermeiden, gelungen ist es mir nicht.
    Deshalb habe ich den Quelltext bis auf die Liste reduziert, um die Ursache zu finden. Dabei ist mir aufgefallen, dass border-top beim body den unerwünschten Außenrand nach oben auch im Firefox verschwinden läßt.
    Da ich margin-top:0 verwendet habe, verstehe ich den Außenrand überhaupt nicht.
    Ich brauche keine Alternativlösung für mein beschriebenes Problem. Ich möchte das Entstehen des Außenrandes nach oben verstehen.
    Vielen Dank,Steve!

    Einen Link zur Seite kann ich leider nicht angeben, da ich den Quelltext mit den Bildern nur auf meinem Rechner habe. Über freien Webspace verfüge ich zur Zeit nicht.
    Eine Lösung habe ich mittlerweile auch gefunden. Statt margin-top:0 habe ich stattdessen margin:0 oder z.B. margin:0 35px 0 0 verwendet. Daraufhin tauchte der obere Rand nicht mehr auf. Da ich das nicht verstehe, möchte ich den Effekt hier noch einmal ausführlicher zeigen:

    <html>
    <head>
    <style>
    body,div {margin:0;}
    div {width:200px;}
    #C1 {background-color:blue;height:100px;border: black solid 1px;}
    #C1 ul {margin:0;}
    #C1 li {background-color: white;float:left; margin:0 30px 0 0;}
    #C2 {background-color:yellow;height:100px;}
    #C2 ul {margin-top:0;}
    #C2 li {background-color: white;float:left; margin-right:30px; margin-top:0;}
    #C3 {background-color:grey;height:100px;border: black solid 1px;}
    #C3 ul {margin:0;}
    #C3 li {background-color: white;float:left; margin:0 30px 0 0}
    </style>
    </head>

    <body>

    <div id="C1">
    <ul>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    </ul>
    </div>

    <div id="C2">
    <ul>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    </ul>
    </div>

    <div id="C3">
    <ul>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    </ul>
    </div>

    </body>
    </html>


    Das linke Teilbild gehört zum Firefox, das rechte zum Internetexplorer. Der Internetexplorer zeigt das an, was ich erwarte, der Firefox zeigt beim mittleren Block einen oberen Rand an, der meines Erachtens wegen margin-top: 0 dort nichts zu suchen hat.

    Hallo

    Zunächst: Der Firefox zeigt das Ergebnis des Quelltextes korrekt an.

    Mit den CSS-Angaben erzeugst du gleich mehrere klassische Probleme: Float und Collapsing Margins.

    Zu Float siehe zum Beispiel:

    http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

    und

    http://www.thestyleworks.de/basics/float-rule.shtml

    Zu Collapsing Margins

    http://www.peterkropff.de/site/css/collapsing.htm

    und

    https://wiki.selfhtml.org/wiki/CSS/Box-Modell

    Wobei float heutzutage nicht mehr zum nebeneinanderstellen von Elementen mißbraucht werden muss, da mit Flexbox ein sinnvolleres Instrument dafür zur Verfügung steht. Float ist eigentlich nur dafür gedacht Elemente (zum Beispiel Grafiken) von Text umfließen zu lassen.

    Gruss

    MrMurphy

    Hallo MrMurphy, vielen Dank für Ihre Antwort. Ihr Hinweis zu den Collapsing Margins hat mir sehr weiter geholfen. Ich habe zum Test bei der zweiten Liste (#C2) noch zu margin-top:0 die Angabe margin-bottom:100px hinzugefügt und diesen Außenrand dann oberhalb des zweiten Blocks auch entdecken können. Ob diese Regelung zu den Collapsing Margin sinnvoll ist, möchte ich bezweifeln, aber immerhin verstehe ich nun das Zustandekommen des oberen Randes.