Как сделать ровную границу вокруг элемента?

Question

Допустим, у вас есть div, оборачивающий изображение. Как бы вы стилировали div так, чтобы он создавал границы равной ширины на всех четырех сторонах изображения?

Answer 1

1. Если div не должно быть там, вы можете просто дать img фактическую границу и покончить с этим.Указание одного значения ширины создает одинаково толстую границу вокруг всех сторон.

   img {
       border: 3px solid blue;
   }
   

   jsFiddle preview

2. В противном случае, если вам необходимо использоватьdiv в качестве границы по любой причине, сделайте его встроенным блоком и сделайте img блоком.Затем задайте отступ div или поля img.

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

   jsFiddle preview