CSS 边框宽度改变布局

Question

当我将边框宽度从 1px 更改为 0px 时遇到问题。这改变了 div 的布局。 div在margin的影响下应该是一步步堆叠的，但是当我设置border width为0px的时候，top margin就变成了0px.

这是我的代码。

div {
  height: 300px;
  width: 50%;
  margin: 10px;
  border: 1px solid red;
}

.red {
  background-color: #ffcccc;
}

.green {
  background-color: #ccffcc;
}

.blue {
  background-color: #ccccff;
}

.purple {
  background-color: #cccccc
}

<div class="red">
  <div class="green">
    <div class="blue">
      <div class="purple"></div>
    </div>
  </div>
</div>

Answer 1

应该这样做！

<style>

    div {
      height: 300px;
      width: 50%;
      margin: 10px;          
      box-shadow:inset 0px 0px 0px 1px red;
    }

    .red { background-color: #ffcccc; }

    .green { background-color: #ccffcc; }

    .blue { background-color: #ccccff; }

    .purple { background-color: #cccccc}

</style>
<div class="red">
  <div class="green">
    <div class="blue">
      <div class="purple"></div>
    </div>
  </div>
</div>

Answer 2

您可以使用此代码

        body {
            margin: 0;
            padding: 0;
        }   
        div {
            height: 300px;
            width: 50%;
            margin: 10px;
            border: 0px solid red;
            float: left;
        }
        .red {
            background-color: #ffcccc;
        }
        .green {
            background-color: #ccffcc;
        }
        .blue {
            background-color: #ccccff;
        }
        .purple {
            background-color: #cccccc;
        }

    <div class="red">
        <div class="green">
            <div class="blue">
                <div class="purple"></div>
            </div>
        </div>
    </div>

Answer 3

你可以试试这个

div {
    height: 300px;
    width: 50%;
    padding: 1px;
    margin:10px;
    border:0px solid red;
}
.red {
    background-color: #ffcccc;
}
.green {
    background-color: #ccffcc;
}
.blue {
    background-color: #ccccff;
}
.purple {
    background-color: #cccccc;
}

<div class="red">
    <div class="green">
        <div class="blue">
            <div class="purple"></div>
        </div>
    </div>
</div>

Answer 4

在标准 html 内容框模型中，宽度只是框内容的宽度。如果您向其添加填充 and/or 边框，这些将添加到框宽度（在您的情况下，50% + 1px + 1px）。您可以通过选择使用不同的框模型（边框框模型）来更改此行为：在这种情况下，您指定的宽度将始终包括填充和边框。

你可以这样做：

<style>

    div {
      box-sizing: border-box;

      height: 300px;
      width: 50%;
      margin: 10px;
      border: 1px solid red;
    }

    .red { background-color: #ffcccc; }

    .green { background-color: #ccffcc; }

    .blue { background-color: #ccccff; }

    .purple { background-color: #cccccc}

</style>

有关详细信息，请参阅 here and here。

CSS 边框宽度改变布局

CSS border width changing layout

html

css

border

margin

width