向 display:table 单元格添加填充

Question

我正在尝试水平对齐 <li> 元素，同时让它们在 100px by 100px 框中垂直对齐。但我也希望每个元素之间有一点 padding。

这里是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>

基本上，我在寻找相同的东西，但每个元素之间有一些 padding。

Answer 1

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

所以你可以使用 border-spacing，因为 margin 在 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

将填充添加到您的 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

向 display:table 单元格添加填充

Adding padding to display:table-cell

html

css

css-tables