如何为带有填充的图像添加边框？

Question

我的网页上有一张图片，我在其中添加了填充，因此不会出现在角落。我也想给它一个边框，但是边框显示在空白处，而不仅仅是图像...我在做什么错了？

图像还具有float属性。

img {
  float: right;
  width: 300px;
  padding: 25px;
  border-style: solid;
  border-color: #fdb924;
}

Answer 1

给图像一个margin而不是padding：

img {
  float: right;
  width: 300px;
  margin: 25px;
  border-style: solid;
  border-color: #fdb924;
}

<img src="https://via.placeholder.com/250">

Answer 2

将填充更改为空白。 padding是边框和图像之间的空间，而margin是边框和其外部所有内容之间的空间：https://jsfiddle.net/632t5g8x/