html - の下部にある二重境界線の間にスペースを追加しますと要素

Question

リストの一番下に 1px (または 2px) で区切られた 2 つの行が必要<ul>です。

これは私がこれまでに持っているものです。

HTML

<ul>
    <li>here's one </li>
    <li>here's another one</li>
    <li>here's the last one</li>
</ul>​

CSS

ul {
    border-bottom: 1px solid black;
}
ul li {
    border-top: 1px solid red;
}
ul li:last-child {
    border-bottom: 1px solid red;
}
​

jsfiddle で参照してください。

下の境界線 (赤と黒) の間に間隔を空けるにはどうすればよいですか?

Answer 1

簡単な解決策は、UL の下部にパディングを追加することです。

ul {
    border-bottom: 1px solid black;
    padding-bottom: 10px; /* your desired spacing */
}

更新されたデモはこちら: http://jsfiddle.net/tnevg/4/

Answer 2

padding-bottomあなたに追加するだけですul

ul {
    border-bottom: 1px solid black;
    padding-bottom:1px;
}

Answer 3

最後の赤い行の後に 1 ピクセル追加したこのコードを試してください。

デモ

ul {
    border-bottom: 1px solid black;
    padding-bottom:1px; /*added this line*/
}
ul li {
    border-top: 1px solid red;
}
ul li:last-child {
    border-bottom: 1px solid red;

}