css 文字和图片在一行显示不出来

在网页设计中，经常会遇到文字和图片需要在同一行显示的情况，在这种情况下，我们通常会使用CSS来布局。但有时候，当我们将CSS应用到文本和图片时，会出现它们不能在同一行显示的问题。

下面是一个例子：

    <div class="container">
        <p>这是一段文字，<img src="example.jpg" alt="图片">这是一张图片，它们应该在同一行显示。</p>
    </div>

我们希望这段文字和图片在同一行显示，因此我们会添加以下CSS：

    .container p {
        display: inline;
    }
    .container img {
        display: inline;
    }

但是，我们会发现这段文字和图片并没有在同一行显示。

这是因为图片默认是有一个底部的空白区域的，这个空白区域会使得图片看起来比实际尺寸要高一些，从而导致文本和图片不能在同一行显示。

要解决这个问题，我们可以添加以下CSS来去除图片的底部空白：

    .container img {
        display: inline;
        vertical-align: middle;
    }

这个"vertical-align: middle"属性将图片垂直居中对齐，并移除了图片底部的空白区域，从而使得文本和图片能够在同一行显示。

总之，在处理CSS文本和图片同时显示的时候，我们需要注意图片的底部空白问题，并使用"vertical-align"属性来解决它。