Posizionare il bordo all'interno del div e non sul suo bordo

Ho un elemento <div> e voglio metterci un bordo. So che posso scrivere style="border: 1px solid black", ma questo aggiunge 2px ad ogni lato del div, che non è quello che voglio.

Preferirei che questo bordo fosse a -1px dal bordo del div. Il div stesso è 100px x 100px, e se aggiungo un bordo, allora devo fare un po' di matematica per far apparire il bordo.

C'è un modo per far apparire il bordo e garantire che il box sia ancora di 100px (incluso il bordo)?

alex
Domanda modificata 26º gennaio 2015 в 4:38
Programmazione
css3 html css border
7º marzo 2012 в 12:16
17 visualizzazioni
Soluzione

Imposta la proprietà box-sizing a border-box:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

div + div {
    border: 10px solid red;
}
<div>Hello!</div>
<div>Hello!</div>

Funziona su IE8 & above.

Gajus
Risposta modificata 22º agosto 2015 в 7:28
Commentari (10)

Potete anche usare box-shadow in questo modo:

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

Esempio qui: http://jsfiddle.net/nVyXS/ (passare il mouse per visualizzare il bordo)

Questo funziona solo nei browser moderni. Per esempio: Nessun supporto per IE 8. Vedi caniuse.com (box-shadow feature) per maggiori informazioni.

mkelley33
Risposta modificata 2º agosto 2014 в 10:44
Commentari (14)

per un rendering coerente tra i nuovi e i vecchi browser, aggiungi un doppio contenitore, l'esterno con la larghezza, l'interno con il bordo.

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

questo ovviamente solo se la tua larghezza precisa è più importante che avere del markup extra!

Commentari (0)