dk521123 https://blog.hatena.ne.jp/dk521123/ プログラム の超個人的なメモ https://dk521123.hatenablog.com/ React ◾️はじめに 個人的にReact / MUI で作成しているツールにおいて コンポーネント間にマージン（余白）が全くなかったので、 以下のように「sx={{ mt: 4 }}」を追加して解決した。 そこで、余白について、少しづつまとめていく 修正前 <Paper elevation={3}> 修正後 <Paper elevation={3} sx={{ mt: 4 }}> <!-- ★ sx={{ mt: 4 }}を追加 --> 目次 【１】sx 【２】Spacing（余白） １）m(Margin) / p(Padding) ２）t(Top) / b(Bottom) / l(Left) / r… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdk521123.hatenablog.com%2Fentry%2F2025%2F11%2F09%2F230101" title="【React】React ～ Material UI / Spacing ～ - プログラム の超個人的なメモ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn.image.st-hatena.com/image/square/adad63b72f1d6545b2ba2538c3fc2923b2fd5989/backend=imagemagick;height=80;version=1;width=80/https%3A%2F%2Fcdn.blog.st-hatena.com%2Fimages%2Fcircle%2Fofficial-circle-icon%2Fcomputers.gif Hatena Blog https://hatena.blog 2025-11-09 23:01:01 rich https://dk521123.hatenablog.com/entry/2025/11/09/230101 1.0 100%