CODEWITHSUNDEEP
cssborder-boxbox-sizing
jbowman
jbowman

Reputation: 400

why is padding not being applied internally when using border-box

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

Upvotes: 1

Views: 1124

Answers (1)

Michael Rosario
Michael Rosario

Reputation: 56

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
}

Upvotes: 2

Related Questions