邊界和內容之間的空間？ /與內容的邊界距離？

Question

是否可以增加邊框及其內容之間的距離？ 如果有可能，只是做在這裏：JSFiddle

我打算從做是把光暈圍繞內容（使用0像素/ 0像素距離的陰影），然後把邊框的像素夫婦離開光輝。

注：我已經決定做的答案插圖陰影和邊界，而不是，它看起來更好，但由於：3

Answer 1

添加填充。填充元素將增加內容和邊框之間的空間。但是，請注意，一個箱形陰影將開始外邊界，而不是內容，這意味着你不能把陰影和框之間的空間。或者，您可以使用：之前或之後：在元素上的僞選擇器之後創建一個稍大的框，以便放置陰影，如下所示：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格：

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

其能夠利用僞元件（後）。
我已添加到原始代碼a

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; 
}