CSSの枠線 - DIVのグループをきちんとまとめよう

Question

私はここで「金髪の瞬間」を持っています - これは簡単だと確信していますが、わかりません。

私はDIVのグリッドを持っています（10行はクリアです：両方とも10個のFLOAT：固定サイズのLEFT DIVで構成されています）。

私がしたいのは、これらのグループに境界線を割り当てることです。境界線を持たない境界線を持つセルで境界線を設定します。醜い効果を残す。

は、私はちょうどコーナーが作成されている固体ボックスではなく、「点線」効果ということにする明白なトリックをしないのです例

のためにこれを参照してください？私のCSSを明確にする

- 行が

.row { 
    clear: both; 
} 

このクラスを持っており、細胞が

.cell { 
    float: left; 
    border: 5px solid transparent; 
} 

だけでなく、この1

.top { // repeated for bottom, left and right ofc. 
    border-top: 5px solid black; 
} 

のような0と4クラス間のこのクラスを持っています

Answer 1

Compare this：

：

div { 
    border: none; 
    border-right: 3px solid black; 
} 

EDIT

受け入れソリューションは、パディングが国境をオフ乗になるだろうボーダーの場所を取る作ることでした。参照：

http://jsfiddle.net/kCd7s/2/

Answer 2

を使用すると、全体の広場に境界線を入れた場合、これは境界線がどのように動作するかです。これを避けたい場合は、枠に罫線の幅と等しい罫線を持たない辺に黒色の罫線寸法を付ける必要がありますので、最初にborder: noneを追加してから、通常の高さが20で、罫線が5の場合のように寸法を追加してくださいheight: 30; width: 25; border-right: 5px solid;

Answer 3

するか、this wayを試してみてください：：、あなたは右の境界線をしたい、あなたが設定します

.top::before, 
.bottom::before, 
.left::after, 
.right::after { 
    content: "."; 
    width: 100%; 
    height: 100%; 
    background: black; 
    display: block; 
    font-size: 0; 
    position: absolute; 
} 
.top::before { 
    height: 5px; 
} 
.bottom::before { 
    height: 5px; 
    top: 35px; 
} 
.left::after { 
    width: 5px; 
} 
.right::after { 
    width: 5px; 
    left: 35px; 
}