Question

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?

Answer 1

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