Ukuran kotak CSS3: margin-box; Kenapa tidak?

Kenapa kita tidak punya box-sizing: margin-box;? Biasanya ketika kita memasukkan box-sizing: border-box;style sheet kita benar-benar berarti yang pertama.

Contoh:

Katakanlah saya memiliki tata letak halaman 2 kolom. Kedua kolom memiliki lebar 50%, tetapi terlihat agak jelek karena tidak ada selokan (celah di tengah); Di bawah ini adalah CSS:

.col2 {
    width: 50%;
    float: left;
}

Untuk menerapkan selokan, Anda mungkin berpikir kami bisa menetapkan margin kanan pada kolom pertama dari 2; sesuatu seperti ini:

.col2:first-child {
    margin-right: 24px;
}

Tetapi ini akan membuat kolom kedua membungkus ke baris baru, karena yang berikut ini benar:

50% + 50% + 24px > 100%

box-sizing: margin-box;akan menyelesaikan masalah ini dengan memasukkan margin dalam lebar elemen yang dihitung. Saya akan menemukan ini sangat berguna jika tidak lebih bermanfaat daripada box-sizing: border-box;.

Tidak bisakah kamu gunakan width: calc(50% - 24px);untuk cols kamu? Kemudian atur margin Anda.

Saya pikir kita bisa memiliki box-sizing: margin-box . Model kotak css menunjukkan dengan tepat, apa posisi margin dari frame.

Ada masalah kecil - misalnya, kotak margin bisa tumpang tindih - tetapi mereka tidak sulit untuk dipecahkan.

Saya pikir, situasinya sama, seperti yang bisa kita lihat dengan overflow-x&overflow-y kombinasi, dengan divs posisi absolut dalam sel tabel, dengan kombinasi min | max-width | tinggi dengan ukuran kotak, dan sebagainya.

Ada fitur, fitur yang sangat sederhana, yang tidak dikembangkan oleh pengembang browser.

IMHO, box-sizing: margin-boxadalah fitur yang sangat berguna. Fitur lain yang bermanfaat adalah box-sizing: padding-box, itu ada setidaknya dalam standar, tetapi tidak diterapkan di salah satu browser utama. Bahkan di chrome terbaru!

Catatan: Komentar @Oriol: Firefox menerapkan kotak-ukuran: kotak-padding. Tetapi yang lain tidak, dan itu dihapus dari spec. Firefox akan menghapusnya di versi 50. Sedih.

Pria di atas bertanya tentang menambahkan margin ke lebar keseluruhan, termasuk padding dan border. Masalahnya, margin diterapkan di luar kotak dan padding dan border tidak, saat digunakanborder-box .

Saya sudah mencoba mencapai border-marginide itu. Apa yang saya temukan adalah bahwa jika menggunakan margin Anda dapat menambahkan kelas .lastke item terakhir (dengan margin, lalu menerapkan margin nol, atau menggunakan:last-child/:last-of-type ). Atau tambahkan margin yang sama sepanjang jalan (mirip dengan versi padding di atas).

Lihat contoh di sini: http://codepen.io/mofeenster/pen/Anidc

border-boxmenghitung lebar elemen + paddingnya + batasnya sebagai total lebar. Jadi jika Anda memiliki 2 divs yang lebar 50%, mereka akan berdekatan. Jika Anda menambahkan 8pxpadding ke mereka, maka Anda akan memiliki selokan 16px. Kombinasikan itu dengan elemen pembungkus - yang juga memiliki bantalan 8px- Anda akan memiliki grid yang ditata dengan baik dengan talang yang sama sepanjang jalan.

Lihat contoh ini di sini: http://codepen.io/mofeenster/pen/vGgje

Yang terakhir adalah metode favorit saya.

Saya yakin semua ini sudah jelas, tetapi saya tetap akan mengetiknya karena ... yah, saya perlu latihan. Apakah hasil berikut tidak akan seefisien box-sizing: margin-box;:

.col2 {
    width: 45%;
    height: 90%;
    margin: 5% 2.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

http://jsfiddle.net/Fg3hg/

box-sizingdigunakan untuk mengontrol dari titik mana padding dan border dinilai ke ukuran keseluruhan elemen. Jadi walaupun tidak halal untuk memasukkan pxmargin dengan %lebar (seperti biasanya selalu terjadi), lebih mudah untuk menghitung berapa jumlah persentase relatif seharusnya karena Anda tidak harus memasukkan padding dan berbatasan dengan lebar yang ditentukan.

Ini karena atribut ukuran kotak mengacu pada ukuran elemen setelah menghitung nilai dimensi spesifik tertentu (padding, batas). "box-sizing: border-box" mengatur tinggi / lebar elemen dan mempertimbangkan padding serta lebar perbatasan. Lingkup margin elemen lebih besar dari elemen itu sendiri, yang berarti ia memodifikasi aliran halaman dan elemen-elemen di sekitarnya, oleh karena itu secara langsung mengubah cara elemen tersebut cocok di dalam induknya relatif terhadap elemen-elemen saudaranya. Pada akhirnya nilai atribut "margin-box" akan menyebabkan masalah besar dan pada dasarnya sama dengan mengatur tinggi / lebar elemen secara langsung.

Pada Codrops ada beberapa artikel bagus tentang masalah efek margin dan baris yang dipaksa meluap. Mereka menyarankan menggunakan unit rem atau em dengan normalizer css mengatur ukuran font hingga 100% untuk semua browser, maka ketika Anda mengatur lebar dan margin, mudah untuk melacak efek pada lebar baris hanya dengan membuat catatan di komentar untuk total lebar. Konversi 16px ke 1 em adalah cara untuk menghitung total viewports yang ditargetkan dengan witdh.

Bekerja seperti itu untuk tahap dev setidaknya dan kemudian jika Anda ingin template 'responsif' Anda dapat mengkonversi lebar menjadi% termasuk lebar margin.

Cara lain dan seringkali lebih sederhana yang mereka sarankan untuk menangani talang adalah dengan menggunakan pseudo after dan content: '';pada masing-masing kolom Anda yang saya temukan berfungsi dengan sangat baik. Jika Anda menetapkan kelas div yang merupakan kolom terakhir yang ditentukan seperti akhir, maka Anda dapat menargetkan kelas tersebut untuk tidak memiliki pseudo setelah, atau memiliki yang lebih luas; mana yang paling cocok dengan tata letak Anda.

Bonus tambahan menggunakan metode elemen semu ini adalah juga memberi Anda target untuk bayangan yang dapat memberikan efek lebih 3d dan kedalaman yang lebih besar ke gambar datar pada monitor pembaca juga. Saya sedang bereksperimen dengan efek ini saat ini dengan meningkatkan efek yang digunakan pada tombol, 'mengubah' gradien, dan indeks-z.

Dimensi elemen tingkat blok, yang tidak diganti dalam aliran normal harus memuaskan

margin-kiri + batas-kiri-lebar + padding-kiri + lebar + padding-kanan + lebar-kanan-lebar + margin-kanan = lebar blok yang mengandung

Ketika terlalu dibatasi, browser harus menyesuaikan margin kiri atau kanan. Saya pikir itu berarti lebar kotak margin harus sama dengan lebar blok yang berisi (yaitu 100%).

Untuk kasus Anda, batas transparan dengan box-sizing: border-boxdapat berfungsi seperti margin .

Mungkin mengatur batas ke 0% opacity menggunakan RGBA dan menggunakan perbatasan sebagai margin.

Ada situasi yang menarik ketika menggunakan ukuran isi kotak di dalam tubuh

tidak ada konten tidak ada kotak batas tidak memberikan nilai pada margin kiri-kanan% recount dari dua algoritma recount box ini

  .body{
    box-sizing: border-box;
    margin:0 3%;
  }

Versi Firefox sebelum 57 juga mendukung nilai padding-box untuk ukuran-kotak, meskipun nilai ini telah dihapus dari spesifikasi dan versi browser yang lebih baru.

Jadi margin-box bahkan tidak direncanakan ...