Hinzufügen von Padding zur Anzeige: Tabellenzelle

Question

Ich versuche, <li> Elemente horizontal auszurichten, während sie vertikal innerhalb einer 100px von 100px Box ausgerichtet sind. Aber ich möchte auch ein bisschen padding zwischen jedem Element.

Hier ist die 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>

Grundsätzlich bin ich für die gleiche Sache suchen, aber mit einigen padding zwischen den einzelnen Elementen.

Answer 1

Ich bin mir nicht sicher, ob ich klar bin zu sein. Ich sehe sie in zwei verschiedene Blöcke

so drehen können Sie border-spacing verwenden, da margin nicht in Arbeit 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

Polsterung in Ihrem CSS hinzufügen

.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