CSS边框比图片更大[关闭]

I'm trying to find out how I can make the border around my picture bigger than the image it self in CSS. See the pictures for an example:

Wrong border:

Black circle with a black box around it. The box is just big enough for the circle to fit.

Correct border:

Black circle with a black box around it. The box is larger than the one in the previous image so there is white space between the circle and the box around it.

I want the image to be the original size independent from the border "size".

You need padding on the image's parent element to push the border out away from the image.

You could put the image in a <div> and set specific height and width values for that div. Then add the border to the div instead of the image.

You need to use css padding on the image element or it's parent to achieve your desired effect. See this link for more information.

JSFiddle

HTML:

<img src="http://www.langology.org/wp-content/uploads/2011/03/hello1.jpg"/>

CSS:

img{
border-color: black;
border-width: 5px;
border-style: solid;
padding: 5px;

}

You can vary the padding value so that you can adjust the border with respect to image.