Formatting divs inside div container

Question

I made a simple example to test this out. I have one wrapper div with two other div elements inside it set to display: inline-block;. The two inner div elements fall on the same line, but how do I get them centered on the half of the main div they belong to? For example, the blue box in the middle of the left side of the main div and the red box in the middle of the right side of the main div. Code and screenshot below.

Also, the inspector shows a width of 204px for the main-box div and even when I set padding and margin to 0 there's still a gap on the bottom between the blue/red boxes and the border of the main-box. How do I get rid of the gap?

.box-test {
  height: 200px;
  display: inline-block;
  width: 30%;
  box-sizing: border-box;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#main-box {
  text-align: center;
  border: 1px solid black;
}

<div id="main-box">
  <div id="blue" class="box-test"></div>
  <div id="red" class="box-test"></div>
</div>

possible duplicate of : https://stackoverflow.com/questions/17905827/why-does-my-image-have-space-underneath (for the vertical space) — Temani Afif, Sep 01 '18 at 19:32
possible duplicate of : https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements (for the horizontal space) — Temani Afif, Sep 01 '18 at 19:33

Temani Afif · Answer 1 · 2018-09-01T19:45:40.807

Use flexbox and margin:auto on both elements and they will get centred like you want and you will also get rid of all the whitespace issues:

.box-test {
  height: 200px;
  margin:auto;
  width: 30%;
  box-sizing: border-box;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#main-box {
  border: 1px solid black;
  display:flex;
}

<div id="main-box">
  <div id="blue" class="box-test"></div>
  <div id="red" class="box-test"></div>
</div>

score 1 · Answer 2 · answered Sep 01 '18 at 19:32

What you should use is a flexbox for the wrapper. When defining space-around for the 'horizontal alignment' you will get what you want.

For more details on flexbox see here

* {
  box-sizing: border-box;
}

#main-box {
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
}
.box-test {
  height: 200px;
  width: 30%;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

<div id="main-box">
  <div id="blue" class="box-test"></div>
  <div id="red" class="box-test"></div>
</div>

score 0 · Answer 3 · answered Sep 01 '18 at 19:34

You can use flexbox with property justify-content: space-around on the wrapper.

.box-test {
  height: 200px;
  width: 30%;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#main-box {
  display: flex;
  justify-content: space-around;
  border: 1px solid black;
}

<div id="main-box">
  <div id="blue" class="box-test"></div>
  <div id="red" class="box-test"></div>
</div>

score -1 · Answer 4 · answered Sep 01 '18 at 19:36

#main-box {
  text-align: center;
  border: 1px solid black;
  font-size:0;
}

Why it is so? Please read this:

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Removing whitespace between HTML elements when using line breaks

https://jsfiddle.net/evzckd3w/

Formatting divs inside div container

4 Answers4