html - 在同一行的两个 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 .