简单的HTML <div>不填充其内容的宽度</div>

Question

我有一个非常简单的问题，但我对HTML开发相当新（我知道我已经迟到了大约20年），而且我遇到了问题。

我有以下代码：

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

现在，我的SOME_IMAGE_URL_HERE是在运行时通过 Python （在Google AppEngine上）插入的网址字符串，图片本身的大小可能会有所不同。我希望我的div用10px填充包围图像，有点像在图像周围提供一个框。

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

Answer 1

给它display属性inline-block。 Here's a demo.

（您也可以float将其left和其他一些内容，但inline-block最不可能导致其他问题。）