CSS3 「box-sizing」を使う

widthとheightの値にpaddingとborderの幅を含むようにしてくれるCSSプロパティ。
これまでと考え方が異なるので、1サイト内でデフォルトとbox-sizingの両方を使っていくと混乱しそう。

IE8以下も動かないので、当面スマホサイトで使用していこうかと。

リキッド内での%指定要素に枠線つけるの簡単になったなー
便利!

デモはこちら

CSS

.tab { width:100%; margin:0 0 20px 0; padding:0;}
.tab li { display:inline; list-style-type:none;}
.tab li a { width:20%; margin:0; float:left; text-align:center; display:block; margin:0; padding:15px 0px 13px; background:#DDD; border-left:1px solid #EEE; border-right:1px solid #AAA; border-top:1px solid #EEE; border-bottom:1px solid #AAA; text-decoration:none; -webkit-box-sizing: border-box; box-sizing: border-box;	}
.tab li a:hover { background:#FFF;}
.tab li.here a { border-top:1px solid #6BCF29; border-left:1px solid #6BCF29; border-right:1px solid #529E1F; border-bottom:1px solid #529E1F; background-color: #5EB323; color:#FFF;}

HTML

<ul class="tab">
<li class="here"><a href="">ボタン1</a></li>
<li><a href="">ボタン2</a></li>
<li><a href="">ボタン3</a></li>
<li><a href="">ボタン4</a></li>
<li><a href="">ボタン5</a></li>
</ul>