Html 在问题内部显示内联块文本_Html_Css_Alignment

Html 在问题内部显示内联块文本

html css

Html 在问题内部显示内联块文本,html,css,alignment,Html,Css,Alignment,我一直在尝试显示内联块，如果我不在div中添加任何内容，一切都很好，但是当我添加div时，div崩溃了，我不知道确切的原因有什么想法吗 HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>8 cajas</title> <link rel="stylesheet" type="te

我一直在尝试显示内联块，如果我不在div中添加任何内容，一切都很好，但是当我添加div时，div崩溃了，我不知道确切的原因

有什么想法吗

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>

.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;
}

问题是由于内联元素的默认垂直对齐–

基线

，元素内的文本会影响它并将div推到底部。例如，使用

vertical align:top

来抑制此行为

显示：内联块

创建一个小间隙，因此将

字体大小：0

添加到父级。加上添加

垂直对齐：顶部

，因为默认情况下

内联块

是

基线

所有这些都解决了您的问题

以下是片段：

.caja{
背景颜色：灰色；
宽度：100px；
高度：100px；
边框：1px纯黑；
保证金：5px；
}
卡贾·格兰德先生{
背景颜色：灰色；
边框：1px纯黑；
填充物：5px；
宽度：350px；
保证金：5px；
字号：0
}
.内联块{
显示：内联块；
垂直对齐：顶部；
字体大小：16px；
}


霍拉·蒙多

使用

溢出：隐藏在.inline block
进行此操作
.inline-block{
    display: inline-block;
    overflow: hidden;
}

感谢它的工作，我还测试了它与垂直对齐：中；它也起到了作用。@GiancarloCorzo:很高兴能帮助你。字体大小：0px修复了内联块之间的间距，但实际上修复文本的是垂直对齐：top，就像suslov所说的。我发现了这个教程，它讨论了内联块中的间距。我在回答中提到的这个教程与垂直对齐：top
相同，我刚才给了你一个完整的答案这也可以，但在底部增加了一个额外的边距，而不是默认创建的内联框的边距。您可以通过向父容器添加font-size:0
来修复它