ページネーションのスタイリングをする時にliの要素毎に余白が発生してしまう時の対処方法。

ちなみに下記のソースコードはSassのSCSS記法となっているので、CSSにコンパイルしないと利用できません。

[code language=”css”]
.pagenation {
text-align: center;
margin-top: 20px;
&__list {
display: inline-block;
*display:inline;
zoom:1;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid $brand-gray;

}
&__item {
// ここから
display: table-cell;
*display: inline;
*zoom: 1;
margin: 0;
padding: 0;
// ここまで
border-left: 1px solid $brand-gray;
color: $gray-lighter;
&:first-child {
border-left: none;
}
}
.active {
background: $brand-gray;
a {
color: #FFF;
}
}
a {
display: block;
color: $brand-gray;
padding: 10px 15px;
}
}

[/code]

参考記事