Cant remove the margin of a div inside a div

Question

I'm doing a simple exercise with margin and padding, it should look something like this:

I tried to do it by setting the padding of the outer div to a fix value and setting the margin of the inner div to 0. But my result looks like this:

Inspector in google shows a margin to the right of the inner div, I have no idea where it comes from.

Here are the html and css codes

#box1,
#box2,
#box3,
#box4 {
  width: 200px;
  height: 200px;
  border-width: 4px;
  border-style: solid;
  margin: 8px;
  /* Aufgabe 2 */
  display: inline-block;
  /* Aufgabe 3 */
  padding: 50px;
}

#box1 {
  border-color: red;
}

#box2 {
  border-color: green;
}

#box3 {
  border-color: violet;
}

#box4 {
  border-color: yellow;
}

#inbox1,
#inbox2,
#inbox3,
#inbox4 {
  width: 100px;
  height: 100px;
  /* Aufgabe 3 */
  margin: 0px;
}

#inbox1 {
  background-color: royalblue;
}

#inbox2 {
  background-color: pink;
}

#inbox3 {
  background-color: black;
}

#inbox4 {
  background-color: turquoise;
}

<div id="box1">
  <div id="inbox1"></div>
</div>
<div id="box2">
  <div id="inbox2"></div>
</div>
<div id="box3">
  <div id="inbox3"></div>
</div>
<div id="box4">
  <div id="inbox4"></div>
</div>

Can someone explain where that margin comes from and how I can get rid of it?

The inside of the outer boxX divs is 200x200 and the inner divs, the inboxX ones, are 100x100 and in the upper left corner of the outer divs — j08691, Jun 30 '20 at 16:46

score 2 · Accepted Answer · answered Jun 30 '20 at 16:43

It's not margin, it's just the size of your elements. Your boxes have an explicit width of 200px while the inboxes have an explicit width of 100px. So the extra space is due to that difference.

You should also use classes to share styles between elements:

.box {
  border-width: 4px;
  border-style: solid;
  margin: 8px;
  display: inline-block;
  padding: 50px;
}

#box1 {
  border-color: red;
}

#box2 {
  border-color: green;
}

#box3 {
  border-color: violet;
}

#box4 {
  border-color: yellow;
}

.inbox {
  width: 100px;
  height: 100px;
  margin: 0px;
}

#inbox1 {
  background-color: royalblue;
}

#inbox2 {
  background-color: pink;
}

#inbox3 {
  background-color: black;
}

#inbox4 {
  background-color: turquoise;
}

<div id="box1" class="box">
  <div id="inbox1" class="inbox"></div>
</div>
<div id="box2" class="box">
  <div id="inbox2" class="inbox"></div>
</div>
<div id="box3" class="box">
  <div id="inbox3" class="inbox"></div>
</div>
<div id="box4" class="box">
  <div id="inbox4" class="inbox"></div>
</div>

I still don't understand the logic behind it. The box has a width of 200 px, the inbox 100 px. With the paddings of the box set to 50 px, it's 200=100+50+50. From a geometric perspective it makes perfect sense. So what's wrong with that? — Tun Huang, Jun 30 '20 at 21:58
@TunHuang That is the more intuitive understanding of how it works and is true [if `box-sizing: border-box` is set](https://jsfiddle.net/oh2y5fda/). However, that's not how the box model works [by default](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing). — Zach Saucier, Jun 30 '20 at 22:24
Thx, box-sizing is exactly what I wanted to know, now I understand it. And it surely will be useful to know in the future. — Tun Huang, Jun 30 '20 at 22:55

score 1 · Answer 2 · answered Jun 30 '20 at 16:46

I believe your issue resulted from providing additional width and height, and padding in order to create a gap around the inner box - you should only use one of these methods!

The following code reduces the size of the parent to 100 x 100, and sets the size of the child to 100% of its parent. Then, the padding alone creates the gap:

.box {
  width: 100px;
  height: 100px;
  border-width: 4px;
  border-style: solid;
  margin: 8px;
  display: inline-block;
  padding: 50px;
}
.box1 { border-color: red; }
.box2 { border-color: green; }
.box3 { border-color: violet; }
.box4 { border-color: yellow; }

.inbox {
  width: 100%; height: 100%;
}
.inbox1 { background-color: royalblue; }
.inbox2 { background-color: pink; }
.inbox3 { background-color: black; }
.inbox4 { background-color: turquoise; }

<div class="box box1">
  <div class="inbox inbox1"></div>
</div>
<div class="box box2">
  <div class="inbox inbox2"></div>
</div>
<div class="box box3">
  <div class="inbox inbox3"></div>
</div>
<div class="box box4">
  <div class="inbox inbox4"></div>
</div>

score 1 · Answer 3 · answered Jun 30 '20 at 16:51

You can center horizontally and vertically adding flexbox (modern solution) to each box container, if you want to support older browser see this.

As other answers suggested add classes to your css for better readability and more.

In addition be aware of the dimensions of the boxes.

Here is the solution:

#box1,
#box2,
#box3,
#box4 {
  width: 200px;
  height: 200px;
  border-width: 4px;
  border-style: solid;
  margin: 8px;
  /* Aufgabe 3 */
  padding: 50px;
  
  /* ADD THIS */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* END ADD THIS */
}

#box1 {
  border-color: red;
}

#box2 {
  border-color: green;
}

#box3 {
  border-color: violet;
}

#box4 {
  border-color: yellow;
}

#inbox1,
#inbox2,
#inbox3,
#inbox4 {
  width: 100px;
  height: 100px;
  margin: 0;
}

#inbox1 {
  background-color: royalblue;
}

#inbox2 {
  background-color: pink;
}

#inbox3 {
  background-color: black;
}

#inbox4 {
  background-color: turquoise;
}

<div id="box1">
  <div id="inbox1"></div>
</div>
<div id="box2">
  <div id="inbox2"></div>
</div>
<div id="box3">
  <div id="inbox3"></div>
</div>
<div id="box4">
  <div id="inbox4"></div>
</div>

Hope it helps :)

Cant remove the margin of a div inside a div

3 Answers3