html - ブロックが必要以上に大きい

Question

だから私はデザインを作成していて、それをテストしたとき、境界線はコンテンツの左側に少し出ていました. 内部のコンテンツの周囲に境界線を作成するのではなく、より大きな境界線を作成しました。

HTML

<ul id="profile_stats">
<li class="top"><b>100</b><br /><i>short</i></li>
<li class="top"><b>100</b><br /><i>long</i></li>
<li class="top"><b>100</b><br /><i>images</i></li><br />
<li class="bottom"><b>10</b><br /><i>friends</i></li>
<li class="bottom"><b>10</b><br /><i>followers</i></li>
</ul>

CSS

ul#profile_stats {
    float: right;
    list-style-type: none;
    border-radius: 5px;
    margin-right: 10px;
    border: 1px solid #222;
    width: 180px;
}

ul#profile_stats li {
    float: left;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul#profile_stats .top {
    width: 60px;
    background: #B0B0B0;
    border-bottom: 1px solid #FFF;
}

.top:not(:nth-of-type(1)) {
    border-left: 1px solid #FFF;
}

.top:not(:nth-of-type(3)) {
    border-right: 1px solid #000;
}

ul#profile_stats .bottom {
    width: 90px;
    background: #555;
    border-top: 1px solid #000;
}

JSFiddle: http://jsfiddle.net/rU8N9/8/

Answer 1

デフォルトでは、ほとんどのブラウザーは ul を左側のパディングでレンダリングします。それがデザインを妨げていると思います。試してください:

ul {padding-left: 0;}

それが役に立てば幸い。

Answer 2

ul {padding: 0px 0px 0px 0px;}