CODEWITHSUNDEEP
htmlcss
idungotnosn
idungotnosn

Reputation: 2047

How do I place a space between these CSS circles?

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

Upvotes: 1

Views: 4279

Answers (6)

Tomas Tudja
Tomas Tudja

Reputation: 1

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

Upvotes: 0

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

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>

Upvotes: 7

Mehdi Dehghani
Mehdi Dehghani

Reputation: 11601

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 !

Upvotes: 0

LVDM
LVDM

Reputation: 454

add this to the class 'cell'.

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

plunker

Upvotes: 1

user4563161
user4563161

Reputation:

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>

Upvotes: 2

Mohamed Wazil
Mohamed Wazil

Reputation: 61

Use this

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

Instead of

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

Upvotes: 3

Related Questions