Come faccio a uncollapse un margine? [duplicare]

StackOverflow https://stackoverflow.com/questions/1828804

  •  11-09-2019
  •  | 
  •  

Domanda

    

Questa domanda ha già una risposta qui:

    
            
  •              Come disattivare margin-collasso?                                      9 risposte                          
    •     
    

Crollare margini in CSS: http://www.w3.org /TR/CSS21/box.html#collapsing-margins

della funzione , ma sto cercando di fare il layout, e non posso capire come spegnerlo.

Il modo di solito spiegato nel tutorial CSS è quello di uno:

  1. Aggiungere un bordo
  2. Aggiungi un'imbottitura

Tutti questi hanno effetti collaterali che diventano evidenti quando hai a che fare con layout di pixel-perfect con immagini di sfondo e imbottiture fisse.

C'è un modo per disattivare semplicemente il collasso senza dover spingere pixel in più nel layout? Essa non ha alcun senso per me avere a influenzare visivamente il documento per modificare un comportamento come questo.

È stato utile?

Soluzione

e avete bisogno di qualcosa in mezzo per "rompere" il collasso.

il mio primo pensiero è stato quello di utilizzare un div con display:none impostato in mezzo, ma questo non sembra funzionare.

così ho provato: 

<div style="overflow: hidden; height: 0px; width: 0px;">.</div>

, che sembra fare il lavoro bene (almeno in Firefox, non disporre di Internet Explorer installata qui per provarlo ...) 

<html>
    <body>
        <div style="margin: 100px;">.</div>
        <div style="overflow: hidden; height: 0px; width: 0px;">.</div>
        <div style="margin: 100px;">.</div>
    </body>
</html>

Altri suggerimenti

Da IE8 si potrebbe fare: 

<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uncollapse-margins">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

Con i CSS: 

.uncollapse-margins:before,
.uncollapse-margins:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

Usa Flex o Griglia layout.

In contenitori di flex e della griglia, non c'è alcuna cosa come margine di crollare.

Maggiori dettagli nelle specifiche:

  

3. Flex Contenitori: l'flex e inline-flex display   I valori

     

Un contenitore flessibile stabilisce un nuovo contesto di formattazione flex per la sua   contenuto. Questo è lo stesso di stabilire un contesto di formattazione blocco,   salvo che la layout flex viene utilizzato al posto della struttura del blocco. Per esempio,   galleggianti non si intromettono nel contenitore flessibile, e la flessione   margini del contenitore non collassano con i margini del suo contenuto.

     

5.1. Stabilire griglia Contenitori: il grid e inline-grid   Schermo   I valori

     

Un contenitore griglia stabilisce un nuovo contesto formattazione tabella per la sua   contenuto. Questo è lo stesso di stabilire un contesto di formattazione blocco,   salvo che la layout griglia viene usato al posto di struttura del blocco: galleggianti no   intromettono nel contenitore di tabelle ei margini del contenitore griglia fare   non comprimere i margini dei suoi contenuti.

Eric Meyer si riferisce al punto esatto nel suo articolo margini Uncollapsing .

Si veda il testo di questo articolo dopo la figura 6 per il suo approccio. Egli afferma che 1px padding / bordo è in genere la strada da percorrere, ma offre una soluzione abbastanza semplice per i casi in cui non c'è flessibilità nel aggiungendo quel pixel aggiuntivo.

Si comporta escludere manualmente i margini su ogni elemento, però, quindi non sono sicuro se funzionerà per il vostro caso particolare.

Un trucco pulito per disabilitare collasso margine che non ha alcun impatto visivo, per quanto ne so, è l'impostazione l'imbottitura del genitore per 0.05px: 

.parentClass {
    padding: 0.05px;
}

L'imbottitura non è più così 0 al collasso non si verificherà più, ma allo stesso tempo l'imbottitura è abbastanza piccola che visivamente si arrotondare fino a 0.

Se qualche altro imbottitura è desiderato, quindi applicare imbottitura solo alla "direzione" in cui margine collassamento non è desiderato, per esempio padding-top: 0.05px;.

Esempio di applicazione: 

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}
<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

Modifica ha cambiato il valore da 0.1 a 0.05. Da questo piccolo test , sembra che Firefox prende l'imbottitura 0.1px in considerazione. Anche se, 0.05px seemes di fare il trucco.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top