CODEWITHSUNDEEP
htmlcss
Kibi Brat
Kibi Brat

Reputation: 57

CSS: Make image padding not affect shadow

So, i have simple css but big problem...

.separator a img {
  width: 100%;
  height: auto;
  padding: 12px;
}

And the result is: this

As you can see on the image, shadow is showing on padding of the image but i want it to show on the image.

I want to do this but also to keep the padding.

Any ideas?

Upvotes: 0

Views: 2432

Answers (2)

rvighne
rvighne

Reputation: 21917

You're looking for the margin CSS property. Padding goes on the inside of the border-box, whereas margin goes outside.

Since the shadow is (I'm assuming) applied via box-shadow, the margin will be outside of it and the shadow will display directly adjacent to the image.

Try changing padding: 12px to margin: 12px.

Upvotes: 1

Nicholas Phillips
Nicholas Phillips

Reputation: 129

Try using margin instead of padding. Think of padding as being 'inside' the box, and margin as being the space between the box and other things on the page.

Upvotes: 0

Related Questions