html - 简单的 HTML没有填充其内容的宽度

Question

我有一个可能很简单的问题，但我对 HTML 开发还很陌生（我知道我在这方面迟到了 20 年），而且我遇到了一个问题。

我有以下代码：

<div style="padding:10px; background-color:#b0c4de;">   
  <img src="SOME_IMAGE_URL_HERE">
</div>

现在，my是在运行时通过Python（在 Google AppEngine 上）SOME_IMAGE_URL_HERE插入的 URL 字符串，并且图像本身的大小可能会有所不同。我希望我用填充围绕图像，有点像在图像周围提供一个框。div10px

上面的代码10px在顶部和底部提供了一个填充，但它div延伸到了屏幕的整个宽度。如何将div宽度设置为图像的宽度？请记住，图像大小会发生变化。

Answer 1

给它一个display属性inline-block. 这是一个演示。

（您也可以float将其用于left其他一些事情，但inline-block最不可能引起其他问题。）