Mengapa CSS tidak mendukung padding negatif?


124

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.


27
karena tidak masuk akal memiliki bantalan negatif
Petah

1
Ini sama seperti yang Anda lihat pada HTML yang dibuat oleh Frontpage. Ini agak berfungsi, tetapi menimbulkan banyak kesalahan saat divalidasi. Padding negatif bukan bagian dari spesifikasi tetapi masih didukung oleh browser.
Linus Kleen

9
Banyak orang menginginkan contoh. Ini milik saya dan mengapa saya akan menyukai padding negatif. Dengan menggunakan fitur gambar bingkai, Anda mungkin ingin membiarkan gambar bingkai sedikit tumpang tindih dengan teks (misalnya jika Anda membuat gelembung glossy bergaris tinggi, sangat populer di web saat ini;))
Himmators

81
Jika ada sesuatu yang "tidak masuk akal" bagi seseorang, itu bukan alasan bagi mereka untuk menghalangi jalan orang lain.
Rolf

1
Saya mencoba untuk menampilkan kode dalam sebuah <span>tag dan cara penguraiannya menghasilkan jeda baris tambahan di awal blok kode. Dengan bantalan negatif, saya bisa menghilangkan ruang ekstra ini.
Steven Lu

Jawaban:


86

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.


2
Terima kasih kawan. Itu memberi saya alasan yang memuaskan. Bersulang. :)
ikartik90

11
Bagaimana jika Anda ingin mengecilkan border lebih dekat ke teks, misalnya saat Anda menggunakan gambar border.
Himmators

5
terkadang tidak praktis untuk mengedit CSS semua turunan penampung. Anda mungkin memiliki CSS umum yang berlaku untuk elemen ini di seluruh dokumen, dan Anda tidak ingin mengubahnya untuk konten penampung tertentu, misalnya.
Rolf

15
Eh, itu alasannya, tapi saya tidak akan menyebutnya sebagai alasan yang memuaskan. Ini adalah kasus di mana spesifikasi melampaui memberi tahu saya bagaimana mendefinisikan halaman saya dan mulai memberi tahu saya bagaimana saya harus mendefinisikan halaman saya. Jika saya ingin konten saya tumpang tindih dengan tepi latar belakang, batas dan / atau margin saya, itu seharusnya menjadi hak prerogatif saya, imajinasi para pembuat spesifikasi tentang mengapa saya mungkin ingin melakukannya meskipun demikian. Maaf, hanya sedikit kesal karena saya harus menambahkan cruft sintaks atau lebih buruk lagi, gambar warna tunggal lebar piksel tunggal untuk mendapatkan pemisah berukuran khusus yang lebih kecil dari tinggi teks dan dipusatkan secara vertikal.
Jason

1
@zzzzBov, saya merasa itu relevan karena contoh yang saya berikan di akhir mengapa saya ingin melakukan hal seperti itu, yang merupakan pertanyaan umum di komentar di halaman ini. Memang, kudaku agak tinggi sebelum sampai ke titik itu.
Jason

4

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.


37
Perbatasan yang runtuh ke dalam konten adalah efek yang diinginkan. Apakah Anda mengetahui cara lain untuk mendapatkan efek ini?
Rolf

4
Setuju dengan Rolf. Anda, Oded, jelas tidak menyukai desain eksperimental yang rumit, saya mengerti. Menggunakan padding negatif, dan batas, sementara tidak dapat menggunakan nilai piksel eksplisit, secara praktis tidak mungkin untuk mendapatkan hasil yang serupa. Sejauh yang saya tahu Anda akan membutuhkan beberapa elemen bersarang untuk mencapai hal yang sama, bagaimanapun, hal-hal menjadi sedikit lebih rumit, dalam beberapa kasus.
Yeti

4

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.


1
Ya, tetapi untuk tujuan itu saya lebih suka memiliki atribut baru untuk elemen html, daripada membajak perilaku atribut lain. Contoh Anda memanggil atribut inner-top baru; seperti atribut teratas elemen yang diposisikan secara relatif, tetapi relatif terhadap diri sendiri, bukan terhadap induk. Penggunaan lain yang baik dari padding negatif akan membuat elemen proporsional dengan lebarnya yang terisi dengan 100% padding, tetapi memungkinkan elemen untuk tumbuh secara vertikal jika lebih banyak konten melewatinya, yang tidak mungkin jika konten berada dalam saudara kandung abs-pos ekstra. Padding negatif akan mengembalikan elemen padding yang runtuh ke ukurannya.
sergio

di 2018 pemusatan semudah menggunakan tampilan fleksibel dengan konten justify dan align-items ... 3 baris kode untuk memiliki div terpusat yang sempurna.
kaiser


1

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.



0

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.

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.