CSS border width changing layout

Question

I have an issue when I change border width from 1px to 0px. That changes the layout of divs. The divs should be stacked step by step in the influence of margin, but when I set the border width as 0px, the top margin becomes 0px.

This is my code.

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>

score 4 · Answer 1 · answered Oct 01 '19 at 05:38

In the standard html content box model the width is only that of the content of the box. If you add padding and/or borders to it, these will be added to the box width (in your case, 50% + 1px + 1px). You can change this behavior by choosing to use a different box model, the border box model : in this case the width you specify will always include padding and border.

You can do that like this:

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

See here and here for more details.

score 2 · Accepted Answer · answered Oct 01 '19 at 05:29

You can try this

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>

score 1 · Answer 3 · answered Oct 01 '19 at 05:06

You can use this code

        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>

score 0 · Answer 4 · answered Oct 01 '19 at 05:00

This should do it!

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

CSS border width changing layout

4 Answers4