Mám prvok <div>
a chcem naň umiestniť ohraničenie. Viem, že môžem napísať `style="border: To však pridáva 2px na obe strany divu, čo nie je to, čo chcem.
Radšej by som chcel, aby bol tento okraj -1px od okraja divu. Samotný div má rozmery 100px x 100px, a ak pridám border, musím urobiť nejaké matematické úkony, aby sa border zobrazil.
Existuje nejaký spôsob, ako môžem zabezpečiť, aby sa ohraničenie zobrazilo, a pritom zabezpečiť, že box bude mať stále 100px (vrátane ohraničenia)?
Nastavenie vlastnosti box-sizing
na border-box
:
-- begin snippet: js hide: false -->
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>
Funguje na IE8 & vyššie.
Môžete tiež použiť box-shadow takto:
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;
}
Príklad tu:
(pre zobrazenie ohraničenia prejdite myšou)Toto funguje len v moderných prehliadačoch. Napríklad: Žiadna podpora IE 8. Viac informácií nájdete na stránke caniuse.com (funkcia box-shadow).
pre konzistentné vykresľovanie medzi novými a staršími prehliadačmi pridajte dvojitý kontajner, vonkajší so šírkou, vnútorný s okrajom.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
Toto samozrejme platí len v prípade, že je pre vás presná šírka dôležitejšia ako mať dodatočné značenie!