【スマホサイト】display:table-cellにmarginを指定したい

スマホサイト制作でこのようなデザインを実装する場合、 テキスト位置の調整を考えると、displayプロパティが便利です。 セル間隔をmarginで調節したいところですが、table-cell に margin は無効です。

そこで、border-collapse で dasplay: table のセル間隔を調整したいと思います。 border-collapse でセルのボーダーを重ねるか間隔を空けるかを、 border-spacing でどれぐらい空けるのか指定できます。単位はpxやem、exなどです。 このプロパティは display: table を指定したクラスに追加します。

■html

<section class="pagelist">
<ul class="tab-area">
<li class="tab-link now radius-large-top"><a href="link01.html">リンク1</a></li>
<li class="tab-link other radius-large-top"><a href="link02.html">リンク2</a></li>
<li class="tab-link other radius-large-top"><a href="link03.html">リンク3</a></li>
<li class="tab-link other radius-large-top"><a href="link04.html">リンク4</a></li>
</ul>
</section>

■css

.tab-area {
   display: table;
 margin: 0 auto;
 border-collapse: separate;  /* セルの間隔を空ける */
 border-spacing: 2px 0;  /* 左右 上下で記述 */
}
.tab-link {
  display: table-cell;
    vertical-align: middle;
 width: 71px;
    text-align: center;
}
.tab-area a {
   display: block;
 padding: 8px 0;
}
.tab-area .now {
    background-color: rgb(0,89,178);
    border-top:solid 1px rgb(0,89,178);
 border-left:solid 1px rgb(0,89,178);
    border-right:solid 1px rgb(0,89,178);
   font-size: 108%;
    color: #fff;
}
.tab-area .now a {
 width: 71px;
    color: rgb(255,255,255);
}
.tab-area .other {
 background-color: rgb(246,246,246);
 border-top:solid 1px rgb(236,236,236);
  border-left:solid 1px rgb(236,236,236);
 border-right:solid 1px rgb(236,236,236);
    font-size: 108%;
    color: rgb(51,51,51);
}
.tab-area .other a {
  width: 71px;
    color: rgb(51,51,51);
}

先ほどのページに border-collapse: separate を追加すると このようにセル間隔を調整することができました。