CODEWITHSUNDEEP
htmlcss
问题大王
问题大王

Reputation: 83

Simple CSS: How do I break two cell apart

I want to divorce two cells, making some white area between them while they are horizontally aligned, any idea how to achieve this? 

 <div class="bubble">
      <div id="lover1" class="lover">cell1.</div>
      <div id="lover2" class="lover">cell2.</div>
 </div>

I have tried:

<style>
.bubble { 
  position: absolute; 
  left: 93px; 
  top: 21px; 
  width: 335px; 
  height: 284px; 
  display: table; 
  background-color: #ffcc99;
}

.lover {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}
#lover2{
    margin-left: 100px;
}
</style>

Upvotes: 0

Views: 43

Answers (3)

wangshiyuan
wangshiyuan

Reputation: 21

That's very easy to achieve if you use flexbox to do the trick. If you don't mind changing the property of bubble class, you can do flexbox

Please refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more information.

Upvotes: 0

Ghilas BELHADJ
Ghilas BELHADJ

Reputation: 14124

Use the border-spacing property:

.bubble {
  /* add these lines */
  border-collapse: separate;
  border-spacing: 10px 0px;

  position: absolute; 
  left: 93px; 
  top: 21px; 
  width: 335px; 
  height: 284px; 
  display: table; 
  background-color: #ffcc99;
}

.lover {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;

  /* add some color to your cells to see there boundings */
  background: red;
}
#lover2{
    margin-left: 100px;
}

Upvotes: 1

Nick
Nick

Reputation: 936

<div class="bubble">
      <div id="lover1" class="lover">cell1.</div>
      <div id="lover2" class="lover">cell2.</div>
</div>

CSS:

.bubble .lover {display:inline-block;margin-left:10px;}

That's all the CSS you'll need. However you have used absolute positioning for some reason, so I can't comment on whether this is actually appropriate in the context.

Upvotes: 1

Related Questions