È possibile iniziare il bordo inferiore dopo la quantità x di pixel?

Question

Sarebbe bello se ci fosse una tale opzione, altrimenti avrei dovuto sovrapporre la border-bottom con un altro div ..

Answer 1

EDIT: Cosa farei in questi giorni se c'è un po 'di più in termini di contenuto il testo dell'elemento è utilizzare box-shadow e background-clip. Altrimenti, vedi l'ultima soluzione nella mia risposta originale.

div { 
 
    border-bottom: solid .75em transparent; 
 
    margin: 7em auto 1em; 
 
    width: 10em; height: 5em; 
 
    box-shadow: 0 1px 0 -1px black; 
 
    background: dimgrey padding-box; 
 
}

<div></div>

Analizziamo quanto sopra.

Prima di tutto, border-bottom: solid .75em transparent.

L'area border-bottom sarà l'area vuota. Ecco perché lo rendiamo trasparente. La modifica della larghezza di questo bordo modifica la larghezza dello spazio.

margin, width e height regole - niente di strano qui, solo posizionare e dimensionare l'elemento.

Quindi abbiamo questo bit: box-shadow: 0 1px 0 -1px black.

Questo box-shadow senza sfocatura crea il bordo inferiore. Lo scostamento y (secondo valore) crea un "bordo" 1px. Aumentando questo offset aumenta la larghezza del nostro "bordo". Questo è un bordo black, ma potremmo cambiarlo in qualsiasi altra cosa.

Inoltre, non vogliamo che la nostra ombra di riquadro venga visualizzata sui lati, quindi diamo uno spread -1px.

Infine, abbiamo impostato un background sul nostro elemento. È uno dimgrey, ma potrebbe essere qualsiasi altra cosa (una sfumatura, un'immagine, qualunque). Di default gli sfondi si estendono anche sotto il bordo, ma non lo vogliamo, quindi lo limitiamo all'area dello padding-box. Ho usato la stenografia qui. La proprietà longhand è background-clip e puoi trovare una spiegazione dettagliata di come funziona e altri esempi simili a questo in this article (dichiarazione di non responsabilità: l'ho scritto).

---

Ecco la risposta originale

Si potrebbe utilizzare un elemento pseudo. Assolutamente posizionato, larghezza 100%, sfalsato sotto il fondo dell'elemento.

demo

HTML:

<div></div> 

CSS:

div { 
    position: relative; 
    margin: 7em auto 1em; 
    width: 10em; height: 5em; 
    background: dimgrey; 
} 
div:after { 
    position: absolute; 
    bottom: -.8em; 
    width: 100%; 
    border-bottom: solid 1px; 
    content: ''; 
} 

---

Oppure si potrebbe usare background-clip: content-box e non sarà necessario utilizzare una pseudo- ele ment. Ma poi il tuo testo si attaccherà ai bordi dello sfondo (a meno che non sia un testo piccolo e centrato).

demo

Rilevante CSS:

div { 
    margin: 7em auto 1em; 
    padding: 0 0 .8em; 
    border-bottom: solid 1px; 
    width: 10em; height: 5em; 
    background: dimgrey content-box; 
} 

Answer 2

È possibile utilizzare l'imbottitura.

padding: 10px; // push 10px the content 
border: 1px solid #fff; 

Answer 3

margin e padding sono lo spazio bianco attorno a un'immagine o di un oggetto.

Come si può vedere nell'immagine, il riempimento è lo spazio tra il contenuto e il bordo che si definisce, mentre il margine è lo spazio esterno al bordo, tra il bordo e gli altri elementi accanto a questo oggetto.

Quindi nel tuo caso si può fare qualcosa di simile:

HTML:

<div id="box"></div> 

CSS:

#box{ 
    background: url(image.jpg) no-repeat; 
    height: 100px; 
    width: 100px; 
    border-bottom: 1px solid #333; 
    padding-bottom: 10px; 
} 

Qui trovi un semplice esempio: http://jsfiddle.net/k7QcN/