Espacio entre frontera y contenido?/¿Distancia del borde del contenido?

Question

¿Es posible aumentar la distancia entre un borde y su contenido? Si es posible, hazlo aquí: JSFiddle

Lo que planeo hacer es poner un brillo alrededor del contenido (utilizando una sombra con 0px/distancia 0px) y luego poner un borde de un par de píxeles de distancia de el brillo.

NOTA: He decidido hacer una sombra de inserción y una frontera en cambio, que se ve mejor, pero gracias por las respuestas: 3

Answer 1

Añadir relleno. Rellenar el elemento aumentará el espacio entre su contenido y su borde. Sin embargo, tenga en cuenta que una sombra de caja comenzará en fuera de , no en el contenido, lo que significa que no puede poner espacio entre la sombra y el cuadro Alternativamente, puede usar: antes o después de los pseudo selectores en el elemento para crear un cuadro un poco más grande en el que coloca la sombra, así: http://jsbin.com/aqemew/edit#source

Answer 2

Simplemente envuelva otra div alrededor de ella, que tiene la frontera y el acolchado usted quiere.

Answer 3

Generalmente usa relleno para agregar distancia entre un borde y un contenido. However, el fondo se extiende sobre el relleno.

Aún puede hacerlo con 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 interior:

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

Usted podría intentar agregar un <hr> y el estilo que. Es un cambio mínimo en el marcado, pero parece necesitar menos CSS, por lo que podría hacer el truco.

violín:

http://jsfiddle.net/BhxsZ/

Answer 5

Su posible elemento utilizando seudo (después).
He agregado al código original a

position:relative

y un cierto margen.
Aquí es el jsFiddle modificación: 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; 
}