unter image erscheint ein undefinierbarer 2 Pixel grosser Bereich

NetBull

Erfahrenes Mitglied
Hi,

ich such nun schon seit zwei Stunden nach dem Grund für eine kleine Anomalie.
Ich hab folgendes Design und unter dem IMG sind 2 Pixel Platz, obwohl IMG und Rahmen gleiche Höhe haben sollten.

Woher kann das kommen?

LG NetBu||


HTML:
<!DOCTYPE html>
<html lang="en" class="LayoutTable">

    <head>
        <meta charset="UTF-8">
        <title>Test Responsive</title>

        <style>

            *{
                padding: 0px;
                margin: 0px;
                border: 0px;
            }

            body{
                font-family: "sans-serif";
            }

            .LayoutTable{
                height:100%;
                width: 100%;
                margin: 0px;
                padding: 0px;
                border: 0px;
                display: table;
            }

            .LayoutRow{
                display: table-row;
            }

            .LayoutCell{
                display: table-cell;
            }

            #LayoutTop, #LayoutBottom{
                background: #999;
                height: 30px;
            }

            #LayoutBottom{
                text-align: right;
                line-height: 30px;
            }

            #LayoutBottom .LayoutCell{
                padding-right: 10px;
                font-size: 20px;
            }

            #LayoutTop .LayoutCell{
                font-size: 22px;
            }

            #IconRow{
                height: 30px;
            }

            #IconCell{
                width: 30px;
            }

            #IconCell img{
                height: 30px;
                width: 30px;
            }

        </style>

    </head>

    <body class="LayoutTable">

        <div class="LayoutRow" id="LayoutTop">
            <div class="LayoutCell">
                <div class="LayoutTable">
                    <div class="LayoutRow" id="IconRow">
                        <div class="LayoutCell"></div>
                        <div class="LayoutCell" id="IconCell"><img src="icons/fb.png"/></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="LayoutRow"  id="LayoutCenter">
            <div class="LayoutCell"></div>
        </div>

        <div class="LayoutRow" id="LayoutBottom">
            <div class="LayoutCell">Hier ein Text</div>
        </div>

    </body>

</html>
 
Den White-Space bringen Inline-Elemente von Hause aus mit.

Lösung:
CSS:
#IconCell img{
  height: 30px;
  width: 30px;
  display:block
}
 
Rechtsklick über dem Element -> Element untersuchen wählen - in Chrome Prüfen :)

Beim Überfahren des HTML-Codes erscheinen im Viewport Infos zu den einzelnen Elementen.

Demnach besitzen in Firefox mit #LayoutTop beginnend alle <div>-Elemente, die das <img> umschließen, eine tatsächliche Höhe von 35px statt 30px, in Chrome sind es 36px.

Der Unterschied hängt aber mit den Browser-Schrifteinstellungen zusammen :D
 
Zuletzt bearbeitet:
Zurück