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)?
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.
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:
(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.
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!