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

Adding Padding to Display: table-cell

I'm trying to horizontally align

  • 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: https://jsfiddle.net/as3js51m/1/



    • Kids

      Grades 0-6

    • Teens
      Grades 7-12




    .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;
    }


    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>