Perché i CSS non supportano il riempimento negativo?


124

Ho visto molte volte che la prospettiva di un riempimento negativo potrebbe aiutare lo sviluppo del CSS di alcuni elementi della pagina a diventare migliore e più facile. Tuttavia, non è previsto un riempimento negativo nel CSS W3C. Qual è il motivo dietro questo? C'è qualche ostacolo alla proprietà che ne impedisce l'uso come tale? Grazie per le tue risposte.

AGGIORNAMENTO

Come vedo, ad esempio, nel caso in cui utilizzi un carattere che ha qualcosa, diciamo, 20 px di spaziatura verticale e desideri applicare un bordo tratteggiato alla parte inferiore del carattere, ad esempio quando viene visualizzato un collegamento ipertestuale. In questi casi troverai lo stile troppo trasandato, poiché il bordo tratteggiato apparirà 20px sotto la parola specificata. se usi il margine negativo, non funzionerà, poiché il margine altera l'area al di fuori dei confini. L'imbottitura negativa potrebbe aiutare in tali situazioni.


27
perché non ha senso avere un riempimento negativo
Petah

1
È lo stesso che vedresti su un HTML generato da Frontpage. In un certo senso funziona, ma genera un sacco di errori quando viene convalidato. Il riempimento negativo non fa parte delle specifiche ma è ancora supportato dai browser.
Linus Kleen

9
Molte persone vorrebbero un esempio. Ecco il mio e perché amo il riempimento negativo. Utilizzando la funzione di immagine del bordo, potresti voler lasciare che il bordo dell'immagine si sovrapponga leggermente al testo (ad esempio, se stai creando una bolla lucida evidenziata, molto popolare sul web in questi giorni;))
Himmators

81
Se qualcosa "non ha senso" per qualcuno, non è una scusa per intralciare qualcun altro.
Rolf

1
Sto provando a visualizzare il codice in un <span>tag e il modo in cui viene analizzato genera interruzioni di riga aggiuntive all'inizio del blocco di codice. Con il riempimento negativo, potrei eliminare questo spazio extra.
Steven Lu

Risposte:


86

Di recente ho risposto a una domanda diversa in cui ho discusso perché il modello di scatola è così com'è.

Ci sono ragioni specifiche per ogni parte del modello di scatola. Il riempimento ha lo scopo di estendere lo sfondo oltre il suo contenuto. Se è necessario ridurre lo sfondo del contenitore, è necessario impostare la dimensione corretta del contenitore padre e assegnare all'elemento figlio alcuni margini negativi. In questo caso il contenuto non viene riempito , è traboccante.


2
Grazie amico. Questo mi dà una ragione soddisfacente. Saluti. :)
ikartik90

11
Cosa succede se si desidera ridurre il bordo più vicino al testo, ad esempio quando si utilizza un'immagine del bordo.
Himmators

5
a volte non è pratico modificare il CSS di tutti i figli di un contenitore. Potresti avere CSS generico che si applica a questi elementi in tutto il documento e non vuoi cambiarlo per il contenuto di un particolare contenitore, ad esempio.
Rolf

15
Eh, è un motivo, ma non lo definirei soddisfacente. Questo è un caso in cui la specifica va oltre a dirmi come definire la mia pagina e inizia a dirmi come dovrei definire la mia pagina. Se voglio che il mio contenuto si sovrapponga ai bordi, ai bordi e / o ai margini dello sfondo, questa dovrebbe essere una mia prerogativa, nonostante l'immaginazione dei definitori delle specifiche del motivo per cui potrei volerlo fare. Mi dispiace, solo un po 'irritato dal fatto che devo aggiungere cruft sintattico o, peggio, immagini a singolo colore di un singolo pixel per ottenere un separatore di dimensioni specifiche che sia più piccolo dell'altezza del testo e centrato verticalmente.
Jason

1
@zzzzBov, ho ritenuto che fosse rilevante a causa dell'esempio che ho fornito alla fine del motivo per cui avrei voluto fare una cosa del genere, che è una domanda comune nei commenti in questa pagina. Certo, il mio cavallo era un po 'alto fino a quel punto.
Jason

4

Il riempimento per definizione è un numero intero positivo (compreso 0).

Il riempimento negativo farebbe collassare il bordo nel contenuto (vedere la pagina del modello di scatola su w3) - questo renderebbe l'area del contenuto più piccola del contenuto, il che non ha senso.


37
Il bordo che collassa nel contenuto è esattamente l'effetto desiderato. Conosci altri modi per ottenere questo effetto?
Rolf

4
D'accordo con Rolf. A te, Oded, ovviamente non piacciono i complessi design sperimentali, lo vedo. Utilizzando padding negativo e bordo, pur non essendo in grado di utilizzare valori di pixel espliciti è praticamente impossibile ottenere risultati simili. Per quanto ne so avresti bisogno di più elementi annidati per ottenere la stessa cosa, tuttavia, in alcuni casi le cose diventano un po 'più complicate.
Yeti

4

Vorrei descrivere un ottimo esempio del perché negative paddingsarebbe utile e fantastico.

Come tutti noi sviluppatori CSS sappiamo, allineare verticalmente un div di dimensionamento dinamico all'interno di un altro è una seccatura e, per la maggior parte, visto come impossibile solo usando i CSS. L'incorporazione di negative paddingpotrebbe cambiare questo.

Consulta il seguente codice HTML:

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

Con il seguente CSS, saremmo in grado di centrare verticalmente il contenuto dell'interno divall'interno dell'esterno div:

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

Permettimi di spiegare ...

Posizionando in modo assoluto la parte superiore del div interno al 50% si colloca il bordo superiore del div interno al centro del div esterno. Abbastanza semplice. Questo perché il posizionamento basato sulla percentuale è relativo alle dimensioni interne dell'elemento padre .

Il riempimento basato sulla percentuale , d'altra parte, si basa sulle dimensioni interne dell'elemento target . Quindi, applicando la proprietà di padding-top: -50%;abbiamo spostato il contenuto del div interno verso l'alto di una distanza del 50% dell'altezza del contenuto del div interno, quindi centrando il contenuto del div interno all'interno del div esterno e consentendo comunque la dimensione dell'altezza del div div interiore per essere dinamico!

Se mi chiedi OP, questo sarebbe il miglior caso d'uso, e penso che dovrebbe essere implementato solo così posso fare questo hack. lol. Oppure, dovrebbero semplicemente correggere la funzionalità di vertical-aligne fornirci una versione vertical-alignche funziona su tutti gli elementi.


1
Sì, ma a tale scopo preferirei avere nuovi attributi per gli elementi html, piuttosto che dirottare il comportamento di altri attributi. Il tuo esempio richiede un nuovo attributo inner-top; come l'attributo top dell'elemento relativamente posizionato, ma relativo a self, non al genitore. Un altro buon uso del riempimento negativo sarebbe creare un elemento proporzionalmente alla sua larghezza riempiendo con riempimento al 100%, ma consentendo all'elemento di crescere verticalmente se più contenuto lo trabocca, il che è impossibile se il contenuto è in un fratello extra abs-pos. L'imbottitura negativa riporterebbe l'elemento compresso con imbottitura alle sue dimensioni.
sergio

nel 2018 centrare è facile come usare display flex con justify content e align-items ... 3 righe di codice per avere un div centrato perfetto.
Kaiser il


1

Hai chiesto PERCHÉ, non come imbrogliarlo:

Di solito a causa della pigrizia dei programmatori dell'implementazione iniziale, perché hanno già messo molto più impegno in altre funzionalità, fornendo effetti collaterali più strani come i float, perché erano più richiesti dai progettisti allora e tuttavia non si sono presi il tempo per consentire ciò in modo che possiamo usare le proprietà QUATTRO per spingere / tirare un elemento contro i suoi vicini (ora ne abbiamo solo quattro da spingere e solo 2 da tirare).

Quando l'html è stato progettato, le riviste amavano il testo rifatto intorno alle immagini allora, ora odiato perché oggi abbiamo le tendenze del tocco e amiamo le cose squadrate con molto spazio e niente da leggere. Ecco perché hanno esercitato più pressione sui galleggianti che sul centraggio, oppure avrebbero potuto progettare qualcosa di simile margin-top: fill;o margin: average 0;semplicemente allineare il contenuto al fondo o distribuire il suo spazio extra intorno.

In questo caso penso che non sia stato implementato per lo stesso motivo per cui i CSS mancano di uno :parentpseudo-selettore: per evitare valutazioni in loop.

Senza essere un ingegnere, posso vedere che i CSS in questo momento sono fatti per dipingere gli elementi una volta, ricordare alcune proprietà per gli elementi futuri da dipingere, ma NON tornare MAI agli elementi già dipinti.

Ecco perché (immagino) il riempimento è calcolato sulla larghezza, perché questo è il valore che era disponibile al momento di iniziare a dipingerlo.

Se avessi un valore negativo per il riempimento, influenzerebbe i limiti esterni, che è GIÀ stato definito quando il margine è già stato impostato. Lo so, non è stato ancora dipinto nulla, ma quando leggi come va il processo di pittura, creato da geni con la tecnologia degli anni '90, mi sembra di fare domande stupide e dico solo "grazie", hehe.

Uno dei requisiti delle pagine Web è che siano rapidamente disponibili, a differenza di un'app che può richiedere tempo e consumare le risorse del computer per correggere tutto prima di visualizzarlo, le pagine Web devono utilizzare poche risorse (quindi sono adatte a ogni dispositivo possibile) e scorrere in un attimo.

Se vedi applicazioni con reflow e posizionamento complessi, come InDesign, non puoi scorrere così velocemente! Ci vuole un grande sforzo sia dai processori che dalla scheda grafica per passare alle pagine successive!

Quindi dipingere e calcolare in avanti e dimenticare un elemento una volta disegnato, per ora sembra essere un MUST.



0

Perché i progettisti di CSS non hanno avuto la lungimiranza di immaginare la flessibilità che ciò avrebbe portato. Ci sono molti motivi per espandere l'area del contenuto di una scatola senza influire sulla sua relazione con gli elementi vicini. Se pensi che non sia possibile, metti del nowraptesto lungo in una casella, imposta una larghezza sulla casella e osserva come il contenuto in eccesso non influisce sul layout.

Sì, questo è ancora rilevante con CSS3 nel 2019; esempio calzante: layout flexbox. I margini degli elementi di Flexbox non collassano, quindi per distanziarli uniformemente e allinearli con il bordo visivo del contenitore, è necessario sottrarre i margini degli elementi dal riempimento del contenitore. Se un risultato è <0, è necessario utilizzare un margine negativo sul contenitore o sommare tale margine negativo con il margine esistente. Cioè il contenuto dell'elemento influenza il modo in cui si definiscono i suoi margini, che è all'indietro. La somma non funziona in modo pulito quando il contenuto degli elementi flessibili ha margini definiti in unità diverse o è influenzato da una dimensione del carattere diversa, ecc.

L'esempio seguente dovrebbe, idealmente, avere caselle grigie allineate e distanziate in modo uniforme ma, purtroppo, non lo sono.

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>

Ho riscontrato abbastanza di questi piccoli problemi nel corso degli anni in cui un piccolo riempimento negativo avrebbe fatto molta strada, ma invece sono costretto ad aggiungere markup, uso calc()o preprocessori CSS non semantici che funzionano solo quando le unità sono le stesse , eccetera.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.