Mengapa CSS tidak mendukung padding negatif?

Saya telah melihat ini berkali-kali bahwa prospek padding negatif dapat membantu pengembangan CSS elemen halaman tertentu menjadi lebih baik dan lebih mudah. Namun, tidak ada ketentuan untuk padding negatif di CSS W3C. apa alasan dibalik ini? Apakah ada halangan pada properti yang mencegah penggunaannya seperti itu? Terima kasih atas jawaban Anda.

UPDATE

Seperti yang saya lihat, misalnya, jika Anda menggunakan font yang memiliki sesuatu, katakanlah, spasi vertikal 20px, dan Anda ingin menerapkan batas putus-putus ke bagian bawah font, misalnya saat hyperlink muncul. Dalam kasus seperti itu, Anda akan menemukan gayanya terlalu lusuh, karena garis putus-putus akan muncul 20px di bawah kata yang ditentukan. jika Anda menggunakan margin negatif, itu tidak akan berfungsi, karena margin mengubah area di luar batas. Padding negatif mungkin membantu dalam situasi seperti itu.

Baru-baru ini saya menjawab pertanyaan berbeda di mana saya membahas mengapa model kotak seperti ini.

Ada alasan khusus untuk setiap bagian model kotak. Padding dimaksudkan untuk memperluas latar belakang di luar isinya. Jika Anda perlu mengecilkan latar belakang penampung, Anda harus membuat penampung induk dengan ukuran yang benar dan memberikan elemen anak beberapa margin negatif. Dalam hal ini konten tidak diisi , itu meluap.

Pengisi menurut definisi adalah bilangan bulat positif (termasuk 0).

Padding negatif akan menyebabkan batas menciut ke dalam konten (lihat halaman model kotak di w3) - ini akan membuat area konten lebih kecil dari konten, yang tidak masuk akal.

Saya ingin menjelaskan contoh yang sangat bagus tentang mengapa negative paddingmenjadi berguna dan luar biasa.

Seperti yang kita semua pengembang CSS ketahui, menyelaraskan div yang berukuran dinamis secara vertikal dengan yang lain adalah merepotkan, dan untuk sebagian besar, dipandang sebagai tidak mungkin hanya menggunakan CSS. Penggabungan negative paddingdapat mengubah ini.

Harap tinjau HTML berikut:

<div style="height:600px; width:100%;">
    <div class="vertical-align" style="width:100%;height:auto;" >
        This DIV's height will change based the width of the screen.
    </div>
</div>

Dengan CSS berikut, kita akan dapat secara vertikal memusatkan konten bagian divdalam di dalam bagian luar div:

.vertical-align {
    position: absolute;
    top:50%;
    padding-top:-50%;
    overflow: visible;
}

Izinkan saya menjelaskan ...

Benar-benar memposisikan bagian atas div dalam pada 50% menempatkan tepi atas div bagian dalam di tengah div luar. Cukup mudah. Ini karena pemosisian berbasis persentase relatif terhadap dimensi bagian dalam elemen induk .

Sebaliknya, padding berbasis persentase didasarkan pada dimensi bagian dalam elemen yang ditargetkan . Jadi, dengan menerapkan properti dari padding-top: -50%;kita telah menggeser konten div dalam ke atas dengan jarak 50% dari tinggi konten div bagian dalam, oleh karena itu memusatkan konten div dalam di dalam div luar dan masih memungkinkan dimensi ketinggian div batin menjadi dinamis!

Jika Anda bertanya kepada saya OP, ini akan menjadi kasus penggunaan terbaik, dan saya pikir ini harus diterapkan agar saya dapat melakukan peretasan ini. lol. Atau, mereka hanya harus memperbaiki fungsionalitas vertical-aligndan memberi kami versi vertical-alignyang berfungsi pada semua elemen.

Ini bisa membantu, dengan cara:

The box-sizing properti CSS digunakan untuk mengubah model kotak standar CSS digunakan untuk lebar menghitung dan ketinggian elemen.

http://www.w3.org/TR/css3-ui/#box-sizing
https://developer.mozilla.org/En/CSS/Box-sizing

Anda bertanya MENGAPA, bukan bagaimana cara menipu:

Biasanya karena kemalasan pemrogram dalam implementasi awal, karena mereka TELAH berusaha lebih keras dalam fitur lain, memberikan lebih banyak efek samping yang aneh seperti float, karena mereka lebih banyak diminta oleh desainer saat itu namun mereka tidak meluangkan waktu. untuk mengizinkan ini sehingga kita dapat menggunakan EMPAT properti untuk mendorong / menarik elemen ke tetangganya (sekarang kita hanya memiliki empat untuk mendorong, dan hanya 2 untuk menarik).

Saat html dirancang, majalah menyukai teks yang dialirkan ulang di sekitar gambar, sekarang dibenci karena saat ini kami memiliki tren sentuh, dan menyukai hal-hal persegi dengan banyak ruang dan tidak ada untuk dibaca. Itulah mengapa mereka memberi lebih banyak tekanan pada pelampung daripada pada pemusatan, atau mereka dapat merancang sesuatu seperti margin-top: fill;atau margin: average 0;untuk sekadar menyelaraskan konten ke bawah, atau mendistribusikan ruang ekstra ke sekeliling.

Dalam hal ini saya pikir itu belum diimplementasikan karena alasan yang sama yang membuat CSS kekurangan :parentpseudo-selector: Untuk mencegah evaluasi perulangan.

Tanpa menjadi seorang insinyur, saya dapat melihat bahwa CSS sekarang dibuat untuk mengecat elemen sekali, ingat beberapa properti untuk elemen masa depan yang akan dicat, tapi JANGAN PERNAH kembali ke elemen yang sudah dicat.

Itu sebabnya (saya kira) padding dihitung pada lebarnya, karena itulah nilai yang tersedia pada saat mulai mengecatnya.

Jika Anda memiliki nilai negatif untuk padding, itu akan mempengaruhi batas luar, yang SUDAH ditentukan ketika margin telah ditetapkan. Saya tahu, belum ada yang dilukis, tapi ketika Anda membaca bagaimana proses melukis yang dibuat oleh para jenius dengan teknologi 90-an, saya merasa seperti mengajukan pertanyaan bodoh dan hanya mengucapkan "terima kasih" hehe.

Salah satu persyaratan halaman web adalah tersedia dengan cepat, tidak seperti aplikasi yang dapat menghabiskan waktu dan memakan sumber daya komputer untuk mendapatkan semuanya dengan benar sebelum menampilkannya, halaman web perlu menggunakan sedikit sumber daya (sehingga cocok di setiap perangkat. mungkin) dan digulir dengan mudah.

Jika Anda melihat aplikasi dengan pemosisian ulang dan pemosisian yang kompleks, seperti InDesign, Anda tidak dapat menggulir secepat itu! Dibutuhkan upaya besar baik dari prosesor dan kartu grafis untuk melompat ke halaman berikutnya!

Jadi melukis dan menghitung maju dan melupakan elemen yang pernah digambar, untuk saat ini tampaknya HARUS.

Memasang Iframe di dalam container tidak akan cocok dengan ukuran container. Ia menambahkan sekitar 20px padding. Saat ini tidak ada cara mudah untuk memperbaikinya. Anda membutuhkan javascript ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )

Margin negatif akan menjadi solusi yang mudah.

Karena para perancang CSS tidak memiliki pandangan jauh ke depan untuk membayangkan fleksibilitas yang akan dihasilkannya. Ada banyak alasan untuk memperluas area konten kotak tanpa memengaruhi hubungannya dengan elemen di sekitarnya. Jika menurut Anda itu tidak mungkin, letakkan beberapa nowrapteks panjang dalam kotak, setel lebar pada kotak, dan perhatikan bagaimana konten yang meluap tidak melakukan apa-apa pada tata letak.

Ya, ini masih relevan dengan CSS3 di 2019; contoh kasus: tata letak flexbox. Margin item Flexbox tidak menutup, jadi untuk memberi jarak secara merata dan menyelaraskannya dengan tepi visual wadah, seseorang harus mengurangi margin item dari padding wadahnya. Jika ada hasil <0, Anda harus menggunakan margin negatif pada wadah, atau menjumlahkan negatif itu dengan margin yang ada. Yaitu konten elemen mempengaruhi bagaimana seseorang mendefinisikan margin untuk itu, yang mundur. Penjumlahan tidak berfungsi dengan baik saat konten elemen fleksibel memiliki margin yang ditentukan dalam unit berbeda atau dipengaruhi oleh ukuran font yang berbeda, dll.

Contoh di bawah ini seharusnya, idealnya memiliki kotak abu-abu yang sejajar dan berjarak sama tetapi, sayangnya tidak.

body {
  font-family: sans-serif;
  margin: 2rem;
}
body > * {
  margin: 2rem 0 0;
}
body > :first-child {
  margin-top: 0;
}
h1,
li,
p {
  padding: 10px;
  background: lightgray;
}
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;/* just to reset */
  padding: -5px;/* would allow correct alignment */
}
li {
  flex: 1 1 auto;
  margin: 5px;
}

<h1>Cras facilisis orci ligula</h1>

<ul>
  <li>a lacinia purus porttitor eget</li>
  <li>donec ut nunc lorem</li>
  <li>duis in est dictum</li>
  <li>tempor metus non</li>
  <li>dapibus sapien</li>
  <li>phasellus bibendum tincidunt</li>
  <li>quam vitae accumsan</li>
  <li>ut interdum eget nisl in eleifend</li>
  <li>maecenas sodales interdum quam sed accumsan</li>
</ul>

<p>Fusce convallis, arcu vel elementum pulvinar, diam arcu tempus dolor, nec venenatis sapien diam non dui. Nulla mollis velit dapibus magna pellentesque, at tempor sapien blandit. Sed consectetur nec orci ac lobortis.</p>

<p>Integer nibh purus, convallis eget tincidunt id, eleifend id lectus. Vivamus tristique orci finibus, feugiat eros id, semper augue.</p>

Saya telah mengalami cukup banyak masalah kecil ini selama bertahun-tahun di mana sedikit padding negatif akan sangat membantu, tetapi sebaliknya saya terpaksa menambahkan markup non-semantik, penggunaan calc(), atau praprosesor CSS yang hanya berfungsi ketika unitnya sama , dll.