inheriting padding

[macdan]

Hi

I have a div which has padding.

Within this div I want to place an image but I don't want it to inherit the padding.

I have tried creating a new div for the image with 0 padding but this doesn't work - is there a way of doing this?

Thanks in advance.

[JimmyP]

You could set the image as a background of the original div.... or set the image to have a negative margin...(equal to the padding)

[macdan]

thanks JimmyPaddy, that works a treat.

[AutisticCuckoo]

Padding is not inherited.

If you mean that you want to place the image flush with the padding edge (rather than the content edge) of the surrounding DIV, then you can do so by using negative margins or relative positioning on the image. You can also use zero padding on the DIV and add margins or padding to any descendans for which you do want some space to the DIV's edges.

[DaveWoods]

I probably wouldn't apply the padding on the outer div. I'd then apply padding/margin to those elements within the div that required them.

HTML

<div>
 <img src="image.gif" alt="">
 <h1>Heading</h1>
 <p>Some paragraph</p>
</div>

CSS

div {
  background-color: #CCC;
  width: 298px;
  border: dashed 1px #000;
}
img {
  width: 298px;
  height: 50px;
}
h1, p {
  margin: 10px;
}

That's just a simplified version of what you're asking but should be adaptable. If the image is only going to be decorative though then I'd use JimmyPaddy's suggestion and use the image as a background image and then use padding within the div to position other elements accordingly.

If the content inside the div is complicated then I'd also consider using another div around the content and applying the padding to that instead.

As you can see there's a number of options

[macdan]

thanks for the advice everyone.