1

I've got a simple question which hopefully has a simple answer. It seems basic but I just can't get my head around it.

So, I've got four boxes arranged in a container:

div {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.wrapper {
  box-sizing: content-box;
  height: 600px;
  width: 600px;
  margin: 100px auto;
  border: 2px solid gray;
}

.box-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 300px;
  height: 300px;
  padding: 0px;
}

.c {
  background-color: cyan;
}

.y {
  background-color: yellow;
}

.m {
  background-color: magenta;
}

.k {
  background-color: black;
}
<div class="wrapper">
    <div class="box-container">
        <div class="box c"></div>
        <div class="box y"></div>
        <div class="box m"></div>
        <div class="box k"></div>
    </div>
</div>

I've applied box-sizing: border-box; to the divs, but for some reason padding is having no effect at all. If I use margin then it makes the divs too big for the wrapper, and they move position.

What am I missing here?

Thanks in advance

Jamie

Quentin Veron
  • 3,079
  • 1
  • 14
  • 32
jbowman
  • 380
  • 3
  • 15
  • 2
    Because box-sizing is inherited from the parant. Use * { box-sizing: border-box } to set it as default for all components. – mattdevio Sep 14 '18 at 21:10
  • padding + content + border = width/height .... so yes padding will have no effect because the width/height will be kept unless the padding is bigger than width/height (related : https://stackoverflow.com/questions/52242410/box-sizing-border-box-with-no-declared-height-width/52242878#52242878) – Temani Afif Sep 14 '18 at 21:14

1 Answers1

2

Your HTML & CSS is correct. If you need padding on all the .c .m .y .k boxes, then use 

.box {
  width: 300px;
  height: 300px;
  padding: 10px;
  border: 10px solid #000; //border also works
}
Michael Rosario
  • 56
  • 5