在两个div之间放置空格在同一行

Question

这是我的HTML代码：

<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>

这是我的CSS代码：

.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);
}

这是输出：

我试图在两个div之间添加一些空格，但我无法通过查看此处旧问题的答案来实现此目的。有没有办法实现这个目标？

Answer 1

如果您必须保留display: table-cell，则可以使用border分隔<div>元素。这意味着保持或模仿我们需要使用插入box-shadow的原始边框，然后剪切背景，使其不会在透明边框下延伸（我们'用作间隔物）。因此，您的原始CSS将修改为以下内容：

.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

参考文献：

• background-clip。
• box-shadow。

Answer 2

我有不同的方法，通常display: table-cell值不适用于边距。相反，你可以使用display: inline-block;如果你没事，那么你可以申请保证金。

.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

您还可以检查保证金是否符合显示值here。

如果您想在图片下方放置名称，您还可以查看我的第二个选项。你可以放置跨度并将其位置改为绝对位置并在其上加上一些余量。

<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;
}

结果将是这样的。

JS Fiddle for second option.