Padding özelliğinin CSS'deki genişlik veya yüksekliği değiştirmesini nasıl önleyebilirim?

DIVS ile bir site oluşturuyorum . Bir DIV yaratmam dışında her şey yolunda gidiyor. Onları böyle oluşturuyorum (örnek):

newdiv {
    width: 200px;
    height: 60px;
    padding-left: 20px;
    text-align: left;
}

padding-leftÖzelliği eklediğimde, DIVdeğişikliklerin genişliği 220px olarak değişiyor ve 200px'de kalmasını istiyorum.

Diyelim ki tam olarak aynı DIVadlı başka bir tane oluşturdum ve içine koydum, ancak dolgu yok ve var . Aynı şeyi alıyorum, genişliği 220 piksel olacak.anotherdivnewdivnewdivnewdivanotherdivpadding-left: 20pxnewdiv

Bu sorunu nasıl düzeltebilirim?

Mülk ekle:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Not: Bu , Internet Explorer'da sürüm 8'in altında çalışmaz .

İle newdiv bir div koyun width: autovemargin-left: 20px

Dolguyu newdiv'den çıkarın.

W3 Box model sayfası iyi bilgiye sahiptir.

Bunu dene

box-sizing: border-box;

Bir div içindeki metni değiştirmeden div içindeki metni girintilemek istiyorsanız text-indentbunun yerine CSS'yi kullanın padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}

<div class="border">
  Non indented
</div>

<br>

<div class="border indent">
  Indented
</div>

basitçe ekle box-sizing: border-box;

sol dolgu özelliğini eklediğimde, DIV'nin genişliği 220 piksel olarak değişir

Evet, bu tam olarak standartlara uygun. Bu şekilde çalışması gerekiyordu.

Diyelim ki anotherdiv adında newdiv ile aynı olan başka bir DIV oluşturdum ve newdiv'in içine koydum, ancak newdiv'in dolgu içermediğini ve anotherdiv'in dolgu yaptı: 20px. Aynı şeyi alıyorum, newdiv'in genişliği 220 piksel olacak;

Hayır, newdiv 200 piksel genişliğinde kalacak.

20px'lik bir dolguya sahipseniz div genişliğinizi 160px olarak değiştirin, divınızın genişliğine 40px ekler, böylece div'inizin normal görünmesini ve üzerinde ekstra genişlikle bozulmaması için genişlikten 40px çıkarmanız gerekir ve metniniz tamamen berbat.