在问题内显示内联块文本答案

【问题标题】：Display inline block text inside issue在问题内显示内联块文本
【发布时间】：2018-02-21 21:32:27
【问题描述】：

我一直在尝试显示内联块，如果我没有在 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>

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

【问题讨论】：

标签： html css alignment

【解决方案1】：

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

JSFiddle

【讨论】：

谢谢它的工作，我也用vertical-align：middle;它也有效。
@GiancarloCorzo：很高兴为您提供帮助。

【解决方案2】：

display:inline-block 创建一个小间隙，因此将font-size:0 添加到父级。加上vertical-align:top，因为默认inline-block是baseline

所有这些你已经解决了你的问题。

这里是sn-p：

.caja {
  background-color: gray;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 5px;
}
.caja-grande {
  background-color: gray;
  border: 1px solid black;
  padding: 5px;
  width: 350px;
  margin: 5px;
  font-size: 0
}
.inline-block {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
}

<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">
  </div>
</div>
<div class="caja inline-block"></div>
<div class="caja inline-block"></div>
<div class="caja"></div>

您可以在这篇文章Fighting the Space Between Inline Block Elements中找到更多信息（以及如何以其他方式解决此问题的选项）

【讨论】：

font-size:0px 修复了 inline-blocks 之间的间隙，但实际上修复文本的是 vertical-align:top 就像 suslov 说的那样。
我发现这个教程讨论了 inline-blocks 中的差距css-tricks.com/fighting-the-space-between-inline-block-elements
这个教程我在回答中提到的和vertical-align:top一样，我只是给你一个完整的答案

【解决方案3】：

使用overflow: hidden .inline-block 来完成这项工作。

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

【讨论】：

这也可以，但在底部增加了额外的边距
它不是边距，而是默认创建的inline-box 的空间。您可以通过将font-size: 0 添加到父容器来修复它