[css]意図しないmarginができてしまう

Question

あるdiv要素にwidthを設定するとその横に意図しないmarginが発生します。

もちろんドキュメント全体にmargin:0をかけています。

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

画像のような意図しないmarginはなぜ起こるのか？
これを解消するためにはどうすればいいのかご教示いただけないでしょうか？

Answer 1

marginができているというわけではなくて、ブロックレベル要素だからだと思います。

横並びにしたいのであれば、display: inline-block;,display: flex;などについて調べると良いと思います。

Answer 2

残りの70%ではないでしょうか。

Answer 3

結論から言うと単純なケアレスミスでした。

reactでループかけて表示する際、親要素までループをしていたために
flexの横並びが効かなかったみたいです。

flexかける親要素をループの外に記述したら無事アイテムが横並びになってくれました。

修正前

{list.map(item => (
            <div className="post-list">{/* 中に入っているのが問題 */}
                <div className="inner-post-list" key={item.docId + String(new Date())}>
                    <div className="post-text">
                        <div className="post-msg">{item.msg}</div>
                        <button
                            className="delete-icon"
                            onClick={() => handleDelete(item.docId)}
                        >
                            <img src={DeleteIcon} alt="delete" />
                        </button>
                    </div>
                </div>
            </div>
            ))}

修正後

解決法

この場合でいうと「post-listクラス」をループの外でラップする。

<div className="post-list">{/* ループの外に出す */}
            {list.map(item => (
                <div className="inner-post-list" key={item.docId + String(new Date())}>
                    <div className="post-text">
                        <div className="post-msg">{item.msg}</div>
                        <button
                            className="delete-icon"
                            onClick={() => handleDelete(item.docId)}
                        >
                            <img src={DeleteIcon} alt="delete" />
                        </button>
                    </div>
                </div>
            ))}
            </div>