T.J. T.J. - 3 months ago 12
CSS Question

Adding padding to display:table-cell

I'm trying to horizontally align

<li>
elements while having them vertically aligned within a
100px
by
100px
box. But I'd also like a bit of
padding
between each element.

Here is the Fiddle



.toolbar ul {
display: table-row;
}
.toolbar ul li {
display: table-cell;
height: 100px;
list-style-type: none;
vertical-align: middle;
text-align: center;
border: 1px solid black;
background-color: red;
margin: auto;
}
.toolbar ul li a {
display: table-cell;
vertical-align: middle;
height: 100px;
}

<div class="toolbar">
<ul>
<li><a href="#">Kids<br />
Grades 0-6
</a>
</li>
<li><a href="#">Teens<br />Grades 7-12</a>
</li>
</ul>
</div>





Basically, I'm looking for the same thing but with some
padding
between each element.

Answer

I'm not sure if I'm being clear. I'm looking to turn them into two distinct blocks

so you can use border-spacing, because margin won't work in table-cell

.toolbar ul {
  display: table;
  border-spacing: 5px;
  border: black 1px solid;
  padding:0
}
.toolbar ul li {
  display: table-cell;
  height: 100px;
  list-style-type: none;
  vertical-align: middle;
  text-align: center;
  border: 1px solid black;
}
.toolbar ul li a {
  display: table-cell;
  vertical-align: middle;
  height: 100px;
}
<div class="toolbar">
  <ul>
    <li>
      <a href="#">Kids<br />
                Grades 0-6
      </a>
    </li>
    <li>
      <a href="#">Teens<br />Grades 7-12</a>
    </li>
  </ul>
</div>