CSS Positioning without using float poperty

Question

Can u look this link?

Why there div are not align each of on side by side? and why there a gap between them? or here is code in body

I know there a lot of another way to solve this but in this case what is the problem going on?

what is the solution in this prticular case?

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

/*main{background:magenta;padding:10px 0px;text-align:center}*/
main{background:magenta;padding:10px 0px;text-align:left}

div{display:inline-block;background:blue;min-height:50px;
width:calc(100% / 3)}


/*issue:- positioning div without using float poperty**

*/

<main>

<div class="child"></div>
  <div class="child"></div>

  <div class="child"></div>
</main>

and in css

<style>
    *{margin:0;padding:0;box-sizing:border-box;}

    main{background:magenta;padding:10px 0px;text-align:left}

    div{display:inline-block;background:blue;min-height:50px;width:calc(100% / 3)}
</style>

Answer 1

Because display: inline-block creates whitespace.

To remove that simply add font-size: 0 to your parent div, in your case main

With Flexbox you could also do the following:

1. Add display: flex; to your parent div, in your case main
2. Add flex: 1; to your children div and remove the width. The children div will automatically take up the available space.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
main {
  background: magenta;
  padding: 10px 0px;
  text-align: left;
  display: flex;
}
div {
  flex: 1;
  background: blue;
  min-height: 50px;
}

<main>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</main>