Bagaimana cara mengubah padding DIV tanpa mempengaruhi lebar / tinggi?

93

Saya memiliki div yang ingin saya tentukan untuk lebar dan tinggi TETAP, dan juga padding yang dapat diubah tanpa mengurangi lebar / tinggi DIV asli atau meningkatkannya, apakah ada trik CSS untuk itu, atau alternatif menggunakan padding?

css html

— Ryan
sumber

72

Solusinya adalah membungkus div empuk Anda , dengan div luar dengan lebar tetap

HTML

<div class="outer">
    <div class="inner">

        <!-- your content -->

    </div><!-- end .inner -->
</div><!-- end .outer -->

CSS

.outer, .inner {
    display: block;
}

.outer {
    /* specify fixed width */
    width: 300px;
    padding: 0;
}

.inner {
    /* specify padding, can be changed while remaining fixed width of .outer */
    padding: 5px;
}

— Juraj Blahunka
sumber

Hanya ingin menjelaskan, saya tidak yakin, tetapi ini hanya akan berfungsi untuk bantalan horizontal, bukan? Sebagai height: auto tidak mengisi induknya seperti width: auto tidak.

— Jonathan

201

Nyatakan ini di CSS Anda dan Anda harus melakukannya dengan baik:

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}

Solusi ini dapat diterapkan tanpa menggunakan pembungkus tambahan.

Ini akan memaksa browser untuk menghitung lebar sesuai dengan lebar "luar" div, itu berarti padding akan dikurangi dari lebarnya.

— adswebwork
sumber

ini bekerja seperti pesona saya pemula, cari saja properti ini dan berfungsi dengan baik .....

— nida

1

Apakah ada efek samping yang harus saya perhatikan saat menggunakannya?

— Radi

16

Solusi ini lebih baik daripada solusi yang diterima, dan aman untuk tidak menggunakan prefiks lagi: shouldiprefix.com/#box-sizing

— fgblomqvist

@adswebwork Anda menghemat banyak waktu saya. Terima kasih.

— Hardik Chaudhary

17

Kedengarannya seperti Anda ingin mensimulasikan model kotak IE6. Anda dapat menggunakan properti CSS 3 box-sizing: border-box untuk mencapai ini. Ini didukung oleh IE8, tetapi untuk Firefox Anda perlu menggunakan -moz-box-sizingdan untuk Safari / Chrome, gunakan -webkit-box-sizing.

IE6 sudah salah menghitung ketinggian, jadi Anda bagus di browser itu, tapi saya tidak yakin tentang IE7, saya pikir itu akan menghitung ketinggian yang sama dalam mode quirks.

— wsanville.dll
sumber

css3 masih sangat baru seperti iPad :)

— Ryan

10

coba trik ini

div{
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box;    
 box-sizing: border-box;      
}

ini akan memaksa browser untuk menghitung lebar sesuai dengan "luar" -lebar div, itu berarti padding akan dikurangi dari lebarnya.

— KA
sumber

5

ini sama dengan jawaban @ adswebwork, bukan? Saya menghargai penjelasan tentang cara kerjanya, tapi itu mungkin lebih baik sebagai komentar

— craq

1

mengapa memposting jawaban yang identik

— Andrew

4

Untuk mencapai hasil yang konsisten lintas browser, Anda biasanya akan menambahkan browser lain div di dalam divdan tidak memberikan lebar eksplisit, dan a margin. Ini marginakan mensimulasikan paddinguntuk div luar.

— Pekka
sumber