Ergebnis 1 bis 3 von 3

Thema: margin ? inline-block

  1. #1
    Interessierte/r
    Registriert seit
    05.01.2016
    Beiträge
    146
    Danke
    9
    Bekam 11 mal "Danke" in 11 Postings

    Standard 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
    drei div inline-block.jpg
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

    Standard AW: margin ? inline-block

    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.

    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

    ... 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
    Geändert von MrMurphy (06.01.2016 um 01:59 Uhr)

  3. Folgende User finden die Antwort von MrMurphy gut:


  4. #3
    Interessierte/r
    Themenstarter

    Registriert seit
    05.01.2016
    Beiträge
    146
    Danke
    9
    Bekam 11 mal "Danke" in 11 Postings

    Standard AW: margin ? inline-block

    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
    Geändert von modem-kind (06.01.2016 um 02:46 Uhr)

Ähnliche Themen

  1. Wie kann man den Abstand bei einem Inline-Block verändern?
    Von Jolka89 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 31.07.2012, 14:31
  2. Warum keine Block-Elemente in Inline-Elementen?
    Von The User im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 07.05.2009, 05:36
  3. inline/block elemente
    Von Niels im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 28.10.2007, 15:30
  4. W3C-konform trotz Block- in Inline-Element?
    Von Torty im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 08.11.2005, 07:54
  5. div-Block
    Von ALex16 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 13.04.2005, 07:42

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •