boxアイテムの隣同士に隙間が生じる

div要素をインラインブロックにして、隣同士に置こうと思いましたが、左右に隙間ができてしまいます。
何故でしょうか？

また、box_cのみ右配置にしようと margin-left: autoとしましたが上手くいきません。
margin-left: autoの考え方が間違っているのでしょうか？
申し訳ありませんがよろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Document</title>
8    <link rel="stylesheet" href="style.css" />
9  </head>
10  <body>
11    <div class="box a"></div>
12    <div class="box b"></div>
13    <div class="box c"></div>
14  </body>
15</html>

css
1* {
2  margin: 0;
3  padding: 0;
4}
5
6.box {
7  display: inline-block;
8  width: 30px;
9  height: 30px;
10  vertical-align: bottom;
11}
12
13.a {
14  background-color: red;
15}
16.b {
17  background-color: green;
18}
19.c {
20  background-color: blue;
21  margin-left: auto;
22}
23

行動規範の内容に同意します

回答1件

ベストアンサー

marginのautoで片側に寄せるのはdisplay:flexでのやり方です。

親要素が必要になるので、.a.b.cを包むdivを作成しそっちに.boxを移します

html
1<div class="box">
2  <div class="a"></div>
3  <div class="b"></div>
4  <div class="c"></div>
5</div>

css
1* {
2  margin: 0;
3  padding: 0;
4}
5
6.box {
7  display: flex;
8}
9.box > div {
10  width: 30px;
11  height: 30px;
12}
13.a {
14  background-color: red;
15}
16.b {
17  background-color: green;
18}
19.c {
20  background-color: blue;
21  margin-left: auto;
22}