How do I place a space between these CSS circles?

Question

I am currently trying to render various circles on a page. I am currently drawing the circles using modified CSS from the following web page:

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

The CSS for circles in the link above draws the circles, but I am running into a couple of problems:

1. I need the circles to be spaced apart from one another (maybe 3px ?)
2. I need the circles to be in the same horizontal line
3. I can't seem to do 1 and 2 at the same time

I am using the following HTML and 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> 

My circle div s in my HTML implement the circle and the cell classes.

The Plunker link below will lead you to my example:

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

NOTE: The circles are small, so you have to look at the very top left corner of the Plunker preview mode to find them.

Answer 1

The issue is that you are setting the div to display: table-cell; . margin does not apply to elements when their display property is set to table-cell . http://www.w3.org/TR/CSS2/box.html#margin-properties states that margin :

Applies to: all elements except elements with table display types other than table-caption, table and inline-table

One way to get the desired result would be to remove display: table-cell; and add float: left; and margin-right: 3px; to the circles instead.

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

Answer 2

Use this

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

Instead of

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

Answer 3

when using table don't put content in them like images etc like that put a new div inside the cell specifically for content then use padding on your cell's to give spacing like below.

this way you get to keep cell's fluidity when doing responsive deign and it wont push down like float or inline-block would which I'm assuming you are doing since your using table for display.

---

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

Answer 4

add this to the class 'cell'.

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

plunker

Answer 5

I think if you change display: table-cell to inline-block , you will get your expected result. of course you need margin too. Hope this help !

Answer 6

Would this be a viable solution?

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

The code:

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

Regards,

Tomas Tudja