CSS neden negatif dolguyu desteklemiyor?

Bunu defalarca gördüm ki, olumsuz bir dolgu olasılığı, belirli sayfa öğelerinin CSS'sinin geliştirilmesine daha iyi ve daha kolay hale gelmesine yardımcı olabilir. Yine de, W3C CSS'de negatif dolgu için bir hüküm yoktur. Bunun arkasındaki sebep nedir? Mülkün bu şekilde kullanılmasını engelleyen herhangi bir engel var mı? Cevaplarınız için teşekkürler.

GÜNCELLEME

Gördüğüm gibi, örneğin, 20 piksel dikey aralık içeren bir yazı tipi kullanıyorsanız ve bir köprü göründüğünde yazı tipinin altına kesikli bir kenarlık uygulamak istiyorsanız. Bu gibi durumlarda, kesik çizgili kenarlık belirtilen kelimenin 20 piksel altında görüneceğinden, stilin çok perişan olduğunu göreceksiniz. Negatif kenar boşluğu kullanırsanız, kenar boşluğu sınırların dışındaki alanı değiştirdiği için işe yaramayacaktır. Negatif dolgu bu tür durumlarda yardımcı olabilir.

Geçenlerde kutu modelinin neden böyle olduğunu tartıştığım farklı bir soruyu cevapladım .

Kutu modelinin her bir parçası için belirli nedenler vardır. Dolgu, arka planı içeriğinin ötesine genişletmek içindir. Kabın arka planını küçültmeniz gerekiyorsa , üst kapsayıcıyı doğru boyutta yapmalı ve alt öğeye bazı negatif kenar boşlukları vermelisiniz. Bu durumda içerik doldurulmuyor , taşıyor.

Tanıma göre doldurma, pozitif bir tamsayıdır (0 dahil).

Negatif dolgu, kenarlığın içeriğin içine doğru daralmasına neden olur ( w3'teki kutu modeli sayfasına bakın) - bu, içerik alanını içerikten daha küçük hale getirir ve bu mantıklı değildir.

Neden negative paddingyararlı ve harika olacağına dair çok iyi bir örnek açıklamak istiyorum .

Hepimizin CSS geliştiricilerinin bildiği gibi, dinamik olarak boyutlandırılan bir div'i diğerinin içinde dikey olarak hizalamak bir güçlüktür ve çoğu zaman, yalnızca CSS kullanarak imkansız olarak görülür. Birleşmesinegative padding bunu değiştirebilir.

Lütfen aşağıdaki HTML'yi inceleyin:

<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>

Aşağıdaki CSS ile, içteki içeriği dışın diviçinde dikey olarak ortalayabileceğiz div:

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

Açıklamama izin verin ...

İç div'in üst kısmını kesinlikle% 50'ye yerleştirmek, iç div'in üst kenarını dış div'in merkezine yerleştirir. Gayet basit. Bunun nedeni, yüzdeye dayalı konumlandırmanın, ana öğenin iç boyutlarına göre olmasıdır. .

Yüzde göre doldurma , diğer yandan, hedeflenen elementin iç boyutlarında dayanır . Bu nedenle, özelliğini uygulayarak, padding-top: -50%;iç div içeriğini, iç div içeriğinin yüksekliğinin% 50'si kadar yukarı kaydırdık, bu nedenle iç div içeriğini dış div içinde ortaladık ve yine de yükseklik boyutuna izin verdik . iç div dinamik olmak için!

Bana OP diye sorarsanız, bu en iyi kullanım durumu olur ve bence bu hack işlemini yapabilmem için uygulanması gerekir. lol. Veya, sadece işlevselliğini düzeltmeli vertical-alignve bize bunun vertical-aligntüm öğeler üzerinde çalışan bir sürümünü vermelidirler .

Bu arada yardımcı olabilir:

Kutu boyutlandırma CSS özelliği hesaplamak genişlikleri ve elemanların yükseklikleri için kullanılan varsayılan CSS kutusu modelini değiştirmek için kullanılır.

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

NEDEN sordun, nasıl aldatılacağını değil:

Genellikle ilk uygulamadaki programcıların tembelliği nedeniyle, diğer özelliklerde daha fazla çaba sarf ettikleri için, yüzer gibi daha tuhaf yan etkiler ortaya çıkardılar, çünkü o zamanlar tasarımcılar tarafından daha çok talep ediliyordu ve yine de zaman almamışlardı. buna izin vermek için FOUR özelliklerini komşularına doğru itmek / çekmek için kullanabiliriz (artık itmek için sadece dört tane ve çekmek için sadece 2 tane var).

Html tasarlandığında, dergiler o zamanlar görsellerin etrafındaki metinleri sevdiler, şimdi nefret ediyorlardı çünkü bugün dokunma trendlerine sahibiz ve çok fazla alana sahip ve okunacak bir şey olmayan karamsar şeyleri seviyoruz. Bu yüzden şamandıralara ortalamaya göre daha fazla baskı yapıyorlar margin-top: fill;ya margin: average 0;da içeriği aşağıya hizalamak ya da fazladan alanı dağıtmak gibi bir şey tasarlamış olabilirler .

Bu durumda, CSS'nin :parentsözde seçici olmamasına neden olan aynı nedenden dolayı uygulanmadığını düşünüyorum : Döngü değerlendirmelerini önlemek için.

Bir mühendis olmadan, CSS'nin şu anda öğeleri bir kez boyamak için yapıldığını görebiliyorum, gelecekteki öğelerin boyanması için bazı özellikleri hatırlayın, ancak ASLA önceden boyanmış öğelere geri dönmeyin.

Bu yüzden (sanırım) dolgu genişliğe göre hesaplanıyor, çünkü boyamaya başladığında mevcut olan değer buydu.

Doldurma için negatif bir değeriniz varsa, bu, marj zaten ayarlandığında ZATEN tanımlanmış olan dış sınırları etkiler. Biliyorum, henüz hiçbir şey boyanmadı, ama 90'ların teknolojisine sahip dahiler tarafından yaratılan resim sürecinin nasıl gittiğini okuduğunuzda, aptalca sorular sorduğumu ve sadece "teşekkürler" dediğimi hissediyorum hehe.

Web sayfalarının gereksinimlerinden biri, hızlı bir şekilde erişilebilir olmalarıdır, zamanını alan ve görüntülemeden önce her şeyi düzeltmek için bilgisayar kaynaklarını yiyen bir uygulamanın aksine, web sayfalarının çok az kaynak kullanması gerekir (böylece her cihaza sığarlar) mümkün) ve bir esinti içinde kaydırılabilir.

InDesign gibi karmaşık yeniden akış ve konumlandırmaya sahip uygulamalar görürseniz, bu kadar hızlı kaydıramazsınız! Sonraki sayfalara atlamak hem işlemcilerden hem de grafik kartından büyük çaba gerektirir!

Öyleyse boyamak, ileriye doğru hesaplamak ve bir kez çizilen bir öğeyi unutmak, şimdilik bir ZORUNLULUK gibi görünüyor.

Bir Iframe'in kapların içine takılması, kabın boyutuna uymayacaktır. Yaklaşık 20 piksel dolgu ekler. Şu anda bunu düzeltmenin kolay bir yolu yok. JavaScript'e ihtiyacınız var ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )

Negatif marjlar kolay bir çözüm olacaktır.

Çünkü CSS tasarımcıları, bunun getireceği esnekliği hayal edecek öngörülere sahip değildi. Komşu öğelerle ilişkisini etkilemeden bir kutunun içerik alanını genişletmek için birçok neden vardır. Mümkün olmadığını düşünüyorsan, biraz uzunnowrap , bir kutuya metin kutuya bir genişlik ayarlayın ve taşan içeriğin düzene nasıl hiçbir şey yapmadığını izleyin.

Evet, bu hala 2019'da CSS3 ile ilgilidir; duruma göre: flexbox düzenleri. Flexbox öğelerinin kenar boşlukları daralmaz, bu nedenle bunları eşit aralıklarla yerleştirmek ve kabın görsel kenarıyla hizalamak için, öğelerin kenar boşluklarını kaplarının dolgusundan çıkarmanız gerekir. Herhangi bir sonuç <0 ise, kapsayıcıda bir negatif kenar boşluğu kullanmanız veya negatif olanı mevcut kenar boşluğu ile toplamanız gerekir. Yani elementin içeriği , kişinin onun için, geriye doğru olan marjları nasıl tanımladığını etkiler. Esnek öğelerin içeriği farklı birimlerde tanımlanmış kenar boşluklarına sahip olduğunda veya farklı bir yazı tipi boyutundan vb. Etkilendiğinde toplama düzgün çalışmaz.

Aşağıdaki örnek ideal olarak hizalanmış ve eşit aralıklarla yerleştirilmiş gri kutulara sahip olmalı, ancak ne yazık ki öyle değil.

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>

Yıllar boyunca bu küçük sorunlarla yeterince karşılaştım, biraz olumsuz dolgunun çok yol kat edeceği, ancak bunun yerine calc()yalnızca birimler aynı olduğunda çalışan anlamsal olmayan işaretleme, kullanım veya CSS ön işlemcileri eklemeye zorlandım. , vb.