<p>Wenn zwei <code>inline-block</code>s <code>div</code> unterschiedliche Höhen haben, warum stimmt der kürzere nicht mit der Oberseite des Containers überein? (<strong>DEMO</strong>): </p> <p> <pre class="brush:css;toolbar:false;">.container { Rand: 1 Pixel schwarz einfarbig; Breite: 320px; Höhe: 120px; } .klein { Anzeige: Inline-Block; Breite: 40 %; Höhe: 30 %; Rand: 1 Pixel schwarz einfarbig; Hintergrund: aliceblue; } .groß { Anzeige: Inline-Block; Rand: 1 Pixel schwarz einfarbig; Breite: 40 %; Höhe: 50 %; Hintergrund: Beige; }</pre> <pre class="brush:html;toolbar:false;"><div class="container"> <div class="small"></div> <div class="big"></div> </div></pre> </p> <p>Wie richte ich ein kleines <code>div</code> am oberen Rand seines Containers aus? </p>

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue; 
    vertical-align: top;   
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige; 
    vertical-align: top;   
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top; /* <---- this */
}