margin ? inline-block

  • Hallo.. :) ich habe drei simple Div´s die mit => inline-block formatiert sind..
    es gibt keinerlei margin -und doch haben die Abstand von einander
    kann mir das jemand erklären .. ? :)

    <head>

    <style>

    * { margin: 0px; }

    body { background-color: #FF0;
    margin: 0;
    padding: 0; }

    div { height: 200px; }

    #wrapper { width: 100% ; background-color: #f00; height: 270px;
    }

    #box1 { display: inline-block;
    width: 32% ; background-color: #00F;
    }

    #box2 { display: inline-block;
    width: 32% ; background-color: #0FF;

    /*so geht es aber warum ? margin-left: -4px; */
    }

    #box3 { display: inline-block;
    width: 32% ; background-color: #f0F;

    /*so geht es aber warum ? margin-left: -4px; */
    }

    hr { background-color: black;
    height: 5px;
    border: 0;
    }
    </style>
    </head>

    <body>

    <div id="wrapper">
    <hr>

    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>

    <hr>
    <div>

    </body>

    - - - Aktualisiert - - -

    so sieht es aus.. aber die müssten doch direkt aneinander sein

  • Hallo

    Die Bezeichnung inline-block deutet bereits darauf hin, dass sich davon betroffene Container teilweise wie inline-Elemente verhalten. Dazu gehört ein Zwangsabstand rechts und unten.

    Wenn der Abstand stört musst du eine andere display-Art ohne den Abstand wählen, zum Beispiel block.

    Es kursiert zwar der Tip, den Abstand mit einem negativen margin von 4px zu eliminieren, der führt aber häufig nur zu Folgeproblemen. Die vermeintlichen 4px sind nämlich nicht fest vorgegeben und passen nur halbwegs bei 100%-Zoom und Desktop-Bildschirmen.

    Zitat

    aber die müssten doch direkt aneinander sein

    Die Vorstellung ist demnach falsch. Du solltest noch mal nachlesen wie sich inline- und inline-block container verhalten.

    Siehe zum Beispiel

    http://t3n.de/news/kein-abstand-inline-block-523993/

    und überließ dabei nicht die Schlußfolgerung

    Zitat

    ... In dem Fall reicht ein einfaches float vollkommen aus um den gewünschten Effekt zu erzielen. Dies dürfte außerdem die sicherste Methode sein, um die Abstände zwischen den Elementen mit reinem CSS zu eliminieren.

    Gruss

    MrMurphy

    Einmal editiert, zuletzt von MrMurphy (6. Januar 2016 um 00:59)

  • Danke Murphy,
    aber mysteriös is das schon nä..
    das ist nämlich auch offiziell nicht beschrieben auch bei w3 nicht..
    das is irgendwie n Browser bug.. der Abstand wird ja nicht mal in
    Entwickler Tools angezeigt !!!
    dabei soll es ja ein besser Ersatz zu float- E { float: left; } sein ...was ja meist auch okay ist.
    Nur eben nicht ! ganz offensichtlich ! wenn....
    es Nicht wichtig ist das die Elemente direkt aneinander sein sollen -
    naja wenn mans weiß.das es so ist ists ja gut...

    dachte nur ich spinne :) weil ich float und inline-block heut nur so mal verglichen hab
    und dacht ich trau meinen Augen nicht.. auch wegen der nicht Anzeige in den EntwicklerTools :)

    Gruß aus Hamburg .. see you ;)

    achso ..und danke für den link den ich hier nochmal wiederhole für Alle
    http://t3n.de/news/kein-abstand-inline-block-523993/
    es geht also um den White Space.. mm der ja sonst oft so unwichtig ist..
    mmm :)

    - - - Aktualisiert - - -

    SO - gehts prima ! :) (kein Whitespace zwischen den Elementen ) ..im Editor -

    <div id="box1">box1</div><div id="box2">box2</div><div id="box3">box3</div>


    steht aber in vielen Büchern nicht..
    im gegenteil ..da wird meist behauptet das .. das alles ignoriert wird..

    Danke im Namen aller nochmal an >>> MrMurphy :)

    3 Mal editiert, zuletzt von modem-kind (6. Januar 2016 um 01:46)