如何在这些CSS界之间放置一个空格？

我目前正试图渲染页面上的各种圈子。我目前正在起草使用修改CSS圆圈从以下网页：如何在这些CSS界之间放置一个空格？

https://css-tricks.com/examples/ShapesOfCSS/

在上面的链接圈的CSS绘制圆，但我遇到了两个问题：

我需要的圆到远离彼此间隔开（也许3px？）
我需要的圈是在同一水平线上
我似乎无法做图1和2在相同的TI我

我使用下面的HTML和CSS：

.circle-blue { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: deepskyblue; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.circle-gray { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: gray; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    font-size: 6px; 
 
}

<div class="circle-blue cell"></div> 
 
<div class="circle-gray cell"></div> 
 
<div class="circle-blue cell"></div>

我的圈子div在我的HTML实现circle和cell类。

下Plunker链接会带你到我的例子：

http://plnkr.co/edit/SPHmKyOjF6GbTtjEFPrd?p=preview

注：圈子都很小，所以你必须看看Plunker预览模式下的非常左上角找到他们。

来源

2015-05-14 idungotnosn

的问题是，你正在设置div到display: table-cell;。当他们的display属性设置为table-cellmargin并不适用于元素。 http://www.w3.org/TR/CSS2/box.html#margin-properties指出margin：

适用于：所有元素，除了与除表字幕，桌子和直列表其它

的一种方法，以获得所需的结果将是，以除去表显示类型的元素代替display: table-cell;并将float: left;和margin-right: 3px;添加到圆圈。

.circle-blue { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: deepskyblue; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.circle-gray { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: gray; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.cell { 
 
    /*display:table-cell; Remove this*/ 
 
    font-size: 6px; 
 
    float: left; /*Add this*/ 
 
    margin-right: 3px; /*Add this*/ 
 
}

<div class="circle-blue cell"></div> 
 
<div class="circle-gray cell"></div> 
 
<div class="circle-blue cell"></div>

来源

2015-05-14 13:38:53

谢谢。这工作。一旦SO的9分钟接受答案政策过期，我会选择这一个作为正确的答案。 – idungotnosn

如果你想保持流动性，你可以从使用表格得到流畅性，以便响应，那么这种技术不会起作用，浮动也会将它们带出正常流程，并且不会推动你的容器。 – DCdaz

@idungotnosn没问题，很高兴我可以帮忙。我已经添加了一些更多的细节来解释为什么'margin'在原始示例中不起作用。 –

使用此

.cell{ 
    margin-left: 5px; 
    display: inline-block; 
    font-size: 6px; 
    }

而不是

.cell{ 
    display: table-cell; 
    font-size: 6px; 
}

来源

2015-05-14 13:41:15

使用表不要放在内容他们像图像等那样把一个新的div时在单元格内部专门用于内容，然后在y上使用填充我们的细胞的间距如下。

这样你能保持细胞的流动性做响应屈尊时，它不会压低像浮动或内联块将它我假设，因为使用表显示你的，你在做什么。

.circle-blue { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: deepskyblue; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.circle-gray { 
 
    width: 10px; 
 
    height: 10px; 
 
    background: gray; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
    border-radius: 5px; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    font-size: 6px; 
 
    padding: 10px; 
 
}

<div class="cell"> 
 
    <div class="circle-blue"></div> 
 
</div> 
 
<div class="cell"> 
 
    <div class="circle-gray"></div> 
 
</div> 
 
<div class="cell"> 
 
    <div class="circle-blue"></div> 
 
</div>

来源

2015-05-14 13:42:54 DCdaz

它添加到类 '细胞'。

display: inline-block; 
margin: 0 3px; 
vertical-align: top;

plunker

来源

2015-05-14 13:43:08 LVDM

我认为，如果你改变display: table-cell到inline-block，你会得到你预期的结果。当然你也需要保证金。希望得到这个帮助！

来源

2015-05-14 13:51:34

这是一个可行的解决方案吗？

https://hdcs.cz/?q=node/26

代码：

<style> 
.circle-blue { 
    width: 10px; 
    height: 10px; 
    background: deepskyblue; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
} 
.circle-gray { 
    width: 10px; 
    height: 10px; 
    background: gray; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
} 
.cell { 
    display: table-cell; 
    font-size: 6px; 
} 
</style> 
<table> 
<tr> 
<td style="padding: 5px"><div class="circle-blue cell"></div></td> 
<td style="padding: 5px"><div class="circle-gray cell"></div></td> 
<td style="padding: 5px"><div class="circle-blue cell"></div></td> 
</tr> 
</table>

问候，

托马斯Tudja

来源

2015-05-14 14:11:09

如何在这些CSS界之间放置一个空格？

回答

相关问题