Bir <div>
elemanım var ve üzerine bir kenarlık koymak istiyorum. style="border yazabileceğimi biliyorum: 1px solid black"` yazabileceğimi biliyorum, ancak bu div'in her iki tarafına da 2px ekliyor, ki bu istediğim şey değil.
Bu kenarlığın div'in kenarından -1px olmasını tercih ederim. Div'in kendisi 100px x 100px ve bir kenarlık eklersem, kenarlığın görünmesi için biraz matematik yapmam gerekir.
Kenarlığın görünmesini ve kutunun hala 100 piksel (kenarlık dahil) olmasını sağlamanın bir yolu var mı?
Kutu boyutlandırmaözelliğini
border-box` olarak ayarlayın:
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>
IE8 ve üzeri]1 üzerinde çalışır.
Kutu gölgesini şu şekilde de kullanabilirsiniz:
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;
}
Buradaki örnek:
(kenarlığı görüntülemek için üzerine gelin)Bu yalnızca modern tarayıcılarda çalışır. Örneğin: IE 8 desteği yok. Daha fazla bilgi için caniuse.com (box-shadow özelliği) adresine bakın.
Yeni ve eski tarayıcılar arasında tutarlı bir işleme için, dışta genişlik, içte kenarlık olmak üzere çift kapsayıcı ekleyin.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
Bu tabii ki yalnızca kesin genişliğiniz fazladan işaretlemeye sahip olmaktan daha önemliyse geçerlidir!