Como faço para uncollapse uma margem? [duplicado]

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

  •  11-09-2019
  •  | 
  •  

Pergunta

Esta questão já tem uma resposta aqui:

desmoronamento das margens em CSS: http://www.w3.org /TR/CSS21/box.html#collapsing-margins

Eu entendo a do recurso , mas eu estou tentando fazer layout, e eu não consigo descobrir como desligá-lo.

A forma geralmente explicado em tutoriais CSS, quer seja para:

  1. Adicionar um limite
  2. Adicionar um preenchimento

Todos estes têm efeitos colaterais que se tornam evidentes quando você está lidando com layouts de pixel-perfect com imagens de fundo e guarnição fixos.

Existe alguma maneira de simplesmente desativar o colapso sem ter que empurrar pixels extras para o layout? Não faz qualquer sentido para mim ter a afectar visualmente o documento ao comportamento mudança como esta.

Foi útil?

Solução

bem você precisa de algo no meio para "quebrar" o colapso.

meu primeiro pensamento era usar um div com o conjunto display:none no meio, mas que não parecem funcionar.

então eu tentei: 

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

que parece estar a fazer o trabalho muito bem (pelo menos no firefox, não têm o Internet Explorer instalado aqui para testá-lo ...) 

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

Outras dicas

De IE8 você poderia fazer: 

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

Com CSS: 

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

Use Flex ou Grade layout.

Em recipientes flexíveis e grade, não há tal coisa como margem de colapso.

Mais detalhes nas especificações:

3. Flex Contentores: o flex e inline-flex display valores

Um recipiente flexível estabelece uma nova flexão formatação contexto para a sua conteúdo. Este é o mesmo como o estabelecimento de um contexto bloco de formatação, Só que o layout flexível é usado em vez do layout do bloco. Por exemplo, flutuadores não invadir o recipiente flexível, e o flex margens do contêiner não entrar em colapso com as margens de seu conteúdo.

5.1. Estabelecer grade Contentores: o grid e inline-grid exibição valores

Um recipiente grade estabelece uma nova grade de formatação de contexto para a sua conteúdo. Este é o mesmo como o estabelecimento de um contexto bloco de formatação, Só que layout de grade é usado em vez do layout do bloco: carros alegóricos não intrometer-se o recipiente de grade, e as margens do contêiner grade fazer não entrar em colapso com as margens de seu conteúdo.

Eric Meyer se refere ao seu ponto exato em seu artigo margens Uncollapsing .

Veja o texto do artigo após a Figura 6 para sua abordagem. Ele menciona que 1px estofamento / beira é geralmente o caminho a percorrer, mas oferece uma solução bastante simples para casos em que não há nenhuma flexibilidade em adicionar esse pixel adicional.

Trata-se de margens imperiosas manualmente em cada elemento, então eu não tenho certeza se ele vai trabalhar para o seu caso particular.

Um puro truque para desativar a margem de colapso que não tem impacto visual, tanto quanto eu sei, é definir o preenchimento do pai para 0.05px: 

.parentClass {
    padding: 0.05px;
}
não 0

O preenchimento é tão colapso não ocorrerá mais, mas ao mesmo tempo o preenchimento é pequeno o suficiente para que visualmente ele irá arredondar para baixo a 0.

Se algum outro acolchoamento desejado é, em seguida, aplicar preenchimento apenas para a "direcção" em que margem colapsos não é desejada, por exemplo padding-top: 0.05px;.

Exemplo de aplicação: 

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

Editar: alterado o valor de 0.1 para 0.05. De este teste pequeno , parece que o Firefox leva o preenchimento 0.1px em consideração. Embora, seemes 0.05px para fazer o truque.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top