ボーダーとコンテンツの間にスペースがありますか？ /コンテンツからのボーダー距離？

Question

境界線とそのコンテンツの間の距離を増やすことはできますか？ ことが可能である場合は、ちょうどここでそれを行う：JSFiddle

私は何をやってを計画する（0PX/0PX距離に影を使用して）コンテンツの周りに輝きを入れ、その後、ピクセルのカップル離れてから境界線を入れています輝き。

注：3

Answer 1

パディングを追加します。要素をパディングすると、コンテンツと境界線の間のスペースが増加します。ただし、ボックスシャドウはの外側にあるの境界であるで始まります。コンテンツではなく、影とボックスの間にスペースを入れることはできません。あるいは、要素上に：beforeまたは：after疑似セレクタを使用して、シャドウを配置する少し大きめのボックスを作成することができます。http://jsbin.com/aqemew/edit#source

Answer 2

はちょうどそれの周りに別のdivをラップ、ボーダーやパディングを持っている：私は答えをはめ込み影との境界線の代わりに、それは良く見えるが、おかげで行うことを決定しましたあなたは欲しい。

Answer 3

通常、ボーダーとコンテンツの間の距離を追加するためにパディングを使用します。 However、背景はパディングに広がります。

nested elementで引き続き行うことができます。

HTML：

<div id="outter"> 
    <div id="inner"> 
     test 
    </div> 
</div> 

outterのDIV：

border-style: ridge; 
border-color: #567498; 
border-spacing:10px; 
min-width: 100px; 
min-height: 100px; 
float:left; 

、内側のdiv：

width: 100px; 
min-height: 100px; 
margin: 10px; 
background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0, rgb(39,54,73)), 
    color-stop(1, rgb(30,42,54)) 
); 
background-image: -moz-linear-gradient(
    center bottom, 
    rgb(39,54,73) 0%, 
    rgb(30,42,54) 100% 
     );} 

Answer 4

あなたは<hr>を追加し、そのスタイリング試みることができます。その最小限のマークアップの変更は、そのトリックを行うかもしれないように、より少ないCSSを必要とするようです。

フィドル：

http://jsfiddle.net/BhxsZ/

Answer 5

その可能な使用擬似要素（後）。
元のコードに

position:relative

と余白を追加しました。
ここ は変更JSFiddleです： http://jsfiddle.net/r4UAp/86/

#content{ 
    width: 100px; 
    min-height: 100px; 
    margin: 20px auto; 
    border-style: ridge; 
    border-color: #567498; 
    border-spacing:10px; 
    position:relative; 
    background:#000; 
} 
#content:after { 
    content: ''; 
    position: absolute; 
    top: -15px; 
    left: -15px; 
    right: -15px; 
    bottom: -15px; 
    border: red 2px solid; 
}