Padding sul bordo div

Question

Voglio mettere padding su un bordo css. Tiralo dentro un div, lontano dal bordo. Questo è possibile usando css (css3 va bene, webkit).

Ecco il design.

ho fatto mettendo un div all'interno di un div, quindi dare un bordo al div interiore. Voglio rendere la marcatura sottile come possibile, quindi voglio usare solo una div se possibile.

Grazie.

Answer 1

Si dovrebbe essere in grado di fare questo con la proprietà contorno CSS:

<style> 
.outer { 
     outline: 2px solid #CCC; 
     border: 1px solid #999; 
     background-color: #999; 
     } 
</style> 

<div class="outer"> 
example 
</div> 

Answer 2

No, non è possibile. Riempimento, margine e bordo sono tutte parti di elementi, non è possibile dare un bordo di riempimento o un margine di un bordo.

Forse se pubblichi un esempio di ciò che stai cercando di fare, possiamo proporre soluzioni alternative?

-update- Guardando il tuo esempio, temo che non sia ancora possibile, almeno non con un solo div. Non sono neanche un fan di divitis, ma il div extra è probabilmente l'opzione migliore in questo caso.

Answer 3

Il riempimento attorno al bordo (che lo separerebbe dal bordo) è chiamato "margine": per ulteriori dettagli, vedere Box model.

Answer 4

Sfortunatamente, senza aggiungere un altro div, non penso che sia possibile farlo solo con i CSS.

Più è complicato il progetto, più è probabile che occorrano tag html estranei.

L'altra opzione (anche se non eccezionale) è un'immagine di sfondo, o se in qualche modo ti fa sentire meglio, puoi aggiungere elementi lato client con JQuery, mantenendo così la "purezza" dei tuoi file lato server.

Buona fortuna.

Answer 5

È possibile farlo creando un div interno con i bordi desiderati e un div esterno con un display: tabella. Qualcosa di simile a questo:

<style> 
    .outer { 
     background: #ccc; 
     display: table; 
     width: 400px; 
    } 

    .inner { 
     border: 2px dashed #999; 
     height: 50px; 
     margin: 5px; 
    } 

</style> 

<div class="outer"> 

<div class="inner"> 
</div> 

</div> 

Answer 6

Invece di confini, è possibile utilizzare la proprietà contorno:

div{ 
height:300px; 
width:500px; 
background-color:lightblue; 
outline:dashed; 
outline-offset:-10px;  
} 

http://jsfiddle.net/H7KdA/