CODEWITHSUNDEEP
htmlcss
tlyn
tlyn

Reputation: 21

How can I add a border to an image that has padding?

I have an image on my webpage that I added padding to so it wouldn't be in the corner. I also wanted to give it a border but the border is showing up around the empty space instead of just the image... What am I doing wrong?

The image also has a float attribute.

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

Upvotes: 1

Views: 49

Answers (2)

aprouja1
aprouja1

Reputation: 1810

Change the padding to margin. padding is the space between the border and the image, while margin is the space between the border and everything outside of it: https://jsfiddle.net/632t5g8x/

Upvotes: 2

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

Give the image a margin instead of padding:

img {
  float: right;
  width: 300px;
  margin: 25px;
  border-style: solid;
  border-color: #fdb924;
}
<img src="https://via.placeholder.com/250">

Upvotes: 2

Related Questions