SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Technically, a bit dim macdan's Avatar
    Join Date
    Feb 2001
    Location
    London
    Posts
    344
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inheriting padding

    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.
    gorillaweb is a small London based digital design agency.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    Technically, a bit dim macdan's Avatar
    Join Date
    Feb 2001
    Location
    London
    Posts
    344
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks JimmyPaddy, that works a treat.
    gorillaweb is a small London based digital design agency.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <div>
     <img src="image.gif" alt="">
     <h1>Heading</h1>
     <p>Some paragraph</p>
    </div>
    CSS
    Code:
    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

  6. #6
    Technically, a bit dim macdan's Avatar
    Join Date
    Feb 2001
    Location
    London
    Posts
    344
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the advice everyone.
    gorillaweb is a small London based digital design agency.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •