Không gian giữa đường viền và nội dung?/Biên giới khoảng cách từ nội dung?

Question

Có thể tăng khoảng cách giữa đường viền và nội dung của nó không? Nếu có thể, chỉ cần làm điều đó trên đây: JSFiddle

Điều tôi định làm là chiếu sáng xung quanh nội dung (sử dụng bóng với khoảng cách 0px/0px) và sau đó đặt đường viền cách xa vài pixel ánh sáng.

Chú ý: Tôi đã quyết định làm một cái bóng rời và một biên giới thay vào đó, nó trông tốt hơn, nhưng cảm ơn cho câu trả lời: 3

Answer 1

Thêm đệm. Đệm phần tử sẽ tăng khoảng cách giữa nội dung của nó và đường viền của nó. Tuy nhiên, lưu ý rằng hộp đổ bóng sẽ bắt đầu bên ngoài đường viền , không phải nội dung, có nghĩa là bạn không thể đặt khoảng cách giữa bóng và hộp. Ngoài ra, bạn có thể sử dụng: trước hoặc sau khi bộ chọn giả trên phần tử để tạo hộp lớn hơn một chút mà bạn đặt bóng vào, như vậy: http://jsbin.com/aqemew/edit#source

Answer 2

Chỉ cần quấn div khác xung quanh nó, trong đó có đường viền và đệm bạn muốn.

Answer 3

Bạn thường sử dụng đệm để thêm khoảng cách giữa đường viền và nội dung. However, nền được trải rộng trên đệm.

Bạn vẫn có thể làm điều đó với 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; 

bên trong 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

Bạn có thể thử thêm một <hr> và phong cách đó. Một sự thay đổi đánh dấu tối thiểu của nó nhưng dường như cần ít css để có thể thực hiện thủ thuật.

fiddle:

http://jsfiddle.net/BhxsZ/

Answer 5

thể yếu tố sử dụng giả của nó (sau).
Tôi đã thêm vào mã ban đầu là

position:relative

và một số lề.
Đây là JSFiddle chỉnh sửa: 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; 
}