Início / user-24948077

user24948077's questions

Martin Hope
user24948077
Asked: 2025-04-21 00:27:48 +0800 CST
  • 6

De acordo com a descrição no modelo de formatação visual CSS

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = largura do bloco que o contém

Quando margine widthnão são nenhum dos dois autoe sua soma é maior que a largura do bloco que o contém, margin-rightserão ignorados e o valor será calculado de modo a tornar a igualdade verdadeira

.parent {
  background-color: #01c1ff;
  width: 400px;
  height: 400px;
  margin: auto;
}

.child {
  height: 200px;
  margin-left: 150px;
  width: 200px;
  margin-right: 150px;
  background-color: #ff01c1;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

</html>

Neste código, para "child", a largura do bloco que o contém é de 400px e a soma de ++ widthé de 500px. De acordo com a descrição, deve ser definido como 50px para que a equação seja verdadeira.margin-leftmargin-rigthmargin-right

Mas quando verifiquei no navegador, descobri que a margem direita não estava definida como 50px, mas ainda como 150px.

resultado

css