Início / user-5632400

meallhour's questions

Martin Hope
meallhour
Asked: 2025-04-16 13:03:58 +0800 CST
  • 6

Estou tentando entender como o recolhimento de margem se comporta quando um Contexto de Formatação de Bloco (BFC) é introduzido usando overflow: hidden.

Aqui está um exemplo mínimo reproduzível:

.outer {
  background: lightblue;
}

.inner {
  background: lightgreen;
  overflow: hidden; /* Triggers BFC */
  margin: 30px;
}

p {
  margin-top: 30px;
}
<body>
  <div class="outer">
    <div class="inner">
      <p>Paragraph inside a BFC.</p>
    </div>
  </div>
</body>

Pelo que entendi, a configuração overflow: hiddendeve .innercriar um Contexto de Formatação de Bloco, o que evita o colapso de margem entre .innere seu pai .outer.

No entanto, quando inspeciono o layout no Chrome DevTools, parece que a margem superior .innerainda está se recolhendo para cima , fazendo com que pareça .outerter uma margem superior — mesmo que não tenha.

O invólucro externo não tem margem

A margem do invólucro interno "sangra" para fora da área externa

A margem de bloco do parágrafo afeta a altura do invólucro externo

Pergunta:
Por que o colapso de margem ainda ocorre aqui, mesmo que .innerdevesse ser um BFC? Há algo que eu não esteja entendendo?

html
Martin Hope
meallhour
Asked: 2024-03-20 03:26:11 +0800 CST
  • 5

Estou usando a lógica abaixo para calculate the time difference.

No entanto, isso está fornecendo um valor de resultado errado quando days > 1. Por favor, ajude a simplificar o código.

Usarei a lógica de diferença de horário na estrutura angular.

const startDate = new Date(form.value.startDate);
const endDate = new Date();
const dateDiff = this.calculateDateDifference(startDate, endDate);

calculateDateDifference(startDate, endDate) {
    const difference = startDate.getTime() - endDate.getTime();

    const seconds = Math.floor((difference / 1000) % 60);
    const minutes = Math.floor((difference / (1000 * 60)) % 60);
    const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
    const days = Math.floor(difference / (1000 * 60 * 60 * 24));

    console.log(days + ' days ' + hours + ' hours ' + minutes + ' minutes ' + seconds + ' seconds');
    if (days > 1) {
        return `${days} Days, ${hours} Hours, ${minutes} Mins`;
    } else {
        return `${hours} Hours, ${minutes} Mins`;
    }
}
javascript