Adding padding to display:table-cell

Question

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 1

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> 

Answer 2

add padding into your css

.toolbar ul li {
    display: table-cell;
    height: 100px;
    list-style-type: none;
    vertical-align: middle;
    text-align: center;
    border: 1px solid black;
    margin: auto 10px;
    padding: 20px;
}

DEMO