0

Let's say you have a div wrapping an image. How would you style the div so that it creates a border of even width on all four sides of the image?

9
  • What do you mean by perfect border...?
    – BoltClock
    Mar 26, 2011 at 0:17
  • I mean even width on all sides, sorry i'll clarify that Mar 26, 2011 at 0:18
  • Well honestly, you could set the div to the width of the image...or div img{border...}. PS: I think he means that he wants to set a border to the div that looks as if it was set to the image...or something like that...
    – JCOC611
    Mar 26, 2011 at 0:19
  • It doesn't have to be a div... anything to get a border around an image. Mar 26, 2011 at 0:20
  • somethign like this? jsfiddle.net/kjy112/RyEvY/2
    – KJYe.Name
    Mar 26, 2011 at 0:20

1 Answer 1

2
  1. If the div doesn't have to be there, you might as well just give the img an actual border and be done with it. Specifying one width value creates an equally-thick border around all sides.

    img {
        border: 3px solid blue;
    }
    

    jsFiddle preview

  2. Otherwise, if you need to use a div as a border for whatever reason, make it an inline block, and make the img a block. Then either give the div padding or give the img margins.

    div {
        display: inline-block;
        background-color: blue;
        padding: 3px;
    }
    
    img {
        display: block;
    }
    

    jsFiddle preview

2
  • well, the image and the div wrapping it are generated dynamically, so I think this styling of the div is easier in this case... Mar 26, 2011 at 0:23
  • This is correct. Just wanted to point out that inline-block on a block level element makes IE unhappy though.
    – Paul Sham
    Mar 26, 2011 at 0:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.