Putting spaces between two divs in the same line - html

Question

Here is my HTML code:
<div class="boxed" style="background-image: url(http://images.glaciermedia.ca/polopoly_fs/1.1195672.1404743845!/fileImage/httpImage/image.jpg_gen/derivatives/box_100/wanted-man-07-jpg.jpg);">
</div>
<div class="boxed" style="background-image: url(http://images.glaciermedia.ca/polopoly_fs/1.1195672.1404743845!/fileImage/httpImage/image.jpg_gen/derivatives/box_100/wanted-man-07-jpg.jpg);">
</div>
And this is my CSS code:
.boxed {
width: 100px;
height: 100px;
border: 2px solid #3eade1;
border-radius: %50;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
background-repeat: no-repeat;
display: table-cell;
border-spacing: 10px;
}
.boxed img {
opacity: 0;
filter: alpha(opacity=0);
}
And this is the output:
I'm trying to add some spaces between two divs, but I couldn't manage to do it by looking at the answers for older questions in here. Is there any way to achieve this?

Answer 1

If you must keep the display: table-cell then you can use the border to separate the <div> elements. This means to keep, or to emulate, the original border we need to use an inset box-shadow and then also clip the background so that it doesn't extend under the transparent borders (that we're using as spacers). Your original CSS is therefore amended to the following:
.boxed {
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
background-repeat: no-repeat;
display: table-cell;
box-shadow: inset 0 0 0 2px #3eade1;
border: 5px solid transparent;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
JS Fiddle demo.
References:
background-clip.
box-shadow.

Answer 2

I have a different approach, normally display: table-cell value doesn't work with margins. Instead you can use display: inline-block; if you are OK with that then you can apply margin.
.boxed {
width: 100px;
height: 100px;
border: 2px solid #3eade1;
border-radius: %50;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
background-repeat: no-repeat;
display: inline-block;
margin-left:5px;
margin-right:5px;
}
JS Fiddle DEMO
You can also check margin is compliant with which display values here.
If you want to put names underneath your pictures you can also check my second option. You can put spans and change their position as absolute and put some margins on it.
<div class="boxed" style="background-image: url(http://images.glaciermedia.ca/polopoly_fs/1.1195672.1404743845!/fileImage/httpImage/image.jpg_gen/derivatives/box_100/wanted-man-07-jpg.jpg);">
<span>Prince Charles</span>
</div>
span
{
position: absolute;
margin-top: 110px;
}
The result will be like this.
JS Fiddle for second option.