Div içinde sınır koydu ve onun kenarında değil

SORU

7 Mart 2012, ÇARŞAMBA

Div içinde sınır koydu ve onun kenarında değil

<div> bir eleman var ve üzerinde bir sınır koymak istiyorum. 5* *ama bu olan div, her iki tarafında 2px ekler istiyorum ne yazabilirim biliyorum.

Bu sınır div kenarından-1px olması tercih ederim. Div kendisi x 100px, ve eğer bir sınır eklerseniz, o zaman sınır görünmesi için biraz matematik yapmak zorundayım 100px.

Sınır görünür hale getirebilirim bir yolu var, ve kutunun hala 100px (sınırı da dahil olmak üzere) olmasını sağlamak mı?

CEVAP

7 Mart 2012, ÇARŞAMBA

border-box box-sizing özelliğini 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;
}