Bagaimana cara mencegah properti padding dari mengubah lebar atau tinggi di CSS?


227

Saya membuat situs dengan DIVs. Semuanya berfungsi kecuali ketika saya membuat DIV. Saya membuatnya seperti ini (contoh):

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

Ketika saya menambahkan padding-leftproperti, lebar DIVperubahan ke 220px, dan saya ingin tetap di 200px.

Katakanlah saya membuat yang lain DIVbernama anotherdivpersis sama dengan newdiv, dan memasukkannya ke dalam newdivtetapi newdivtidak memiliki padding dan anotherdivmemiliki padding-left: 20px. Saya mendapatkan hal yang sama, newdivlebarnya adalah 220px.

Bagaimana saya bisa memperbaiki masalah ini?


3
Aku sedih mengatakannya, tapi aku suka bagaimana IE menangani ini ... Membuatku lebih masuk akal ...
Nicu Surdu

Jawaban:


390

Tambahkan properti:

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

Catatan: Ini tidak akan berfungsi di Internet Explorer di bawah versi 8.


14
Ini adalah solusi yang bagus untuk batas, tetapi bagaimana ini membantu untuk melapisi?
Kato

6
Ini adalah sihir murni! - Ini memperbaiki model kotak yang kita semua tahu dan benci! yaitu membuatnya bekerja dengan cara yang disarankan oleh intuisi - daripada spesifikasi - tetapi sejauh yang saya tahu tidak melanggar spesifikasi apa pun juga: D Artikel ini menjelaskan dengan baik ... stackoverflow.com/questions/779434/…
technicalbloke

2
@technicalbloke Tautan Anda baru saja kembali ke pertanyaan ini.
mhenry1384

11
Aduh ya, salin dan tempelkan ayam. Ini adalah tautan yang ingin saya bagikan ... paulirish.com/2012/box-sizing-border-box-ftw
technicalbloke

1
Banyak dari Anda harus mempertimbangkan lebar: trik otomatis di bawah ini. Berfungsi di seluruh browser, lebih sedikit kode, dll.
Ryan Shillington



11

Jika Anda ingin membuat indentasi teks dalam div tanpa mengubah ukuran div gunakan CSS text-indentsebagai gantinya padding-left.

.indent {
  text-indent: 1em;
}
.border {
  border-style: solid;
}
<div class="border">
  Non indented
</div>

<br>

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


1
Ini adalah satu-satunya solusi yang saya temukan berfungsi untuk div lebar tetap saya. ukuran kotak tidak menghentikan padding dari mempengaruhi lebar sayangnya, jadi terima kasih satu ton untuk menunjukkan properti kecil yang mengagumkan ini.
Stevo

8

cukup tambahkan box-sizing: border-box;


12
Ini persis sama dengan apa jawaban lain sudah katakan di sini.
Neil Lunn

1

ketika saya menambahkan properti padding-left, lebar DIV berubah menjadi 220px

Ya, itu persis sesuai dengan standar. Begitulah seharusnya bekerja.

Katakanlah saya membuat DIV lain bernama anotherdiv persis sama dengan newdiv, dan meletakkannya di dalam newdiv tetapi newdiv tidak memiliki padding dan anotherdiv memiliki padding-left: 20px. Saya mendapatkan hal yang sama, lebar newdiv akan menjadi 220px;

Tidak, newdiv akan tetap memiliki lebar 200px.


2
Guffa, bukan begitu standar yang seharusnya bekerja sama sekali. Padding jelas tidak seharusnya memengaruhi dimensi elemen yang diterapkannya. Dengan rasa hormat terbesar, mungkinkah Anda membingungkan 'padding' dengan 'margin'?
da5id

1
Ya, padding seharusnya mempengaruhi dimensi elemen. Saya pikir itu Anda yang bingung ... bagaimana Anda mengusulkan bahwa margin akan mempengaruhi dimensi elemen?
Guffa

Sebenarnya, Anda tahu saya pikir kita berdua benar. Saya sudah terbiasa mengatasi efeknya sehingga saya sepenuhnya melupakan standar. Saya menemukan penjelasan yang baik di sini quirksmode.org/css/box.html
Da5id

Jadi, saya minta maaf Pak Guffa. Tetapi untuk tujuan praktis (yang setelah semua yang kita bicarakan) saran saya masih bagus bukan?
da5id

Nah, Anda benar sejauh bahwa ada bug model kotak, tetapi tidak berlaku untuk pertanyaan ini ... :)
Guffa

-1

ubah saja lebar div Anda menjadi 160px jika Anda memiliki padding 20px itu menambah 40px ekstra untuk lebar div Anda sehingga Anda perlu mengurangi 40px dari lebar untuk menjaga div Anda terlihat normal dan tidak terdistorsi dengan lebar tambahan di atasnya dan teks Anda semua kacau.


2
Ini sama dengan jawaban yang diberikan oleh @rvarcher.
8bitjunkie
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.