Ik heb een <div>
element en ik wil er een rand omheen zetten. Ik weet dat ik kan schrijven style="border: 1px solid black"
, maar dit voegt 2px toe aan beide kanten van de div, wat niet is wat ik wil.
Ik zou liever hebben dat deze border -1px is vanaf de rand van de div. De div zelf is 100px x 100px, en als ik een rand toevoeg, dan moet ik wat wiskunde doen om de rand te laten verschijnen.
Is er een manier waarop ik de rand kan laten verschijnen, en ervoor kan zorgen dat de box nog steeds 100px is (inclusief de rand)?
Stel de box-sizing
eigenschap in op 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>
Het werkt op IE8 & boven.
Je kunt ook box-shadow gebruiken zoals dit:
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;
}
Voorbeeld hier:
(hover om rand te zien)Dit werkt alleen in moderne browsers. Bijvoorbeeld: Geen ondersteuning voor IE 8. Zie caniuse.com (box-shadow functie) voor meer info.
voor consistente rendering tussen nieuwe en oudere browsers, voeg een dubbele container toe, de buitenste met de breedte, de binnenste met de rand.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
dit is natuurlijk alleen als je precieze breedte belangrijker is dan het hebben van extra markup!