在问题中显示内联块文本

Gia*_*rzo 0 html css alignment

我一直在尝试显示内联块,如果我没有在 div 中添加任何东西,一切都会很好,但是当我这样做时,div 崩溃了,我不知道为什么。

任何的想法?

https://jsfiddle.net/giancorzo/ebqoptbd/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>8 cajas</title>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
        <div class="caja"></div>
        <div class="caja-grande">
            <div class="caja inline-block">
                <span>Hola mundo</span>
            </div>
            <div class="caja inline-block">
            </div>
            <div class="caja inline-block">
        CSS:    </div>
        </div>
        <div class="caja inline-block"></div>
        <div class="caja inline-block"></div>
        <div class="caja"></div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

CSS:

.caja{
    background-color: gray;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 5px;
}

.inline-block{
    display: inline-block;
}

.caja-grande{
    background-color: gray;
    border: 1px solid black;
    padding: 5px;
    width: 350px;
    margin: 5px;
}
Run Code Online (Sandbox Code Playgroud)

pot*_*hin 6

问题是由于内联元素的默认垂直对齐 - baseline,元素内的文本会影响它并将 div 推到底部。使用vertical-align: top,例如,为了抑制这种行为。

JSFiddle