◾️はじめに
個人的に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(Right) and so on
【１】sx
* CSS style的な設定できるプロパティ * sx = Style eXtension? (公式の記述は特になし)
https://mui.com/system/getting-started/the-sx-prop/
【２】Spacing（余白）
https://mui.com/system/spacing/
* mt = Margin Top => これ以外にも、Margin-xxx がある
１）m(Margin) / p(Padding)
| Value | Explanations |
|---|---|
| m | Margin |
| p | Padding |
補足：Margin と Padding の違い
| 項目 | margin | padding |
|---|---|---|
| 位置 | 要素の外側 | 要素の内側 |
| 背景色 | つかない | つく |
| 用途 | 他の要素との間隔（兄弟間の余白など） | 要素内部のコンテンツと枠線の間隔（ボタンのクリック範囲を広げるなど） |
| 特徴 | 要素間の余白を調整する。マイナスの値を設定できる | 要素自体のサイズ（幅や高さ）を広げる。要素の背景色が適用される |
２）t(Top) / b(Bottom) / l(Left) / r(Right) and so on
| Value | Explanations | Example |
|---|---|---|
| t | Top | mt = Margin-Top |
| b | Bottom | mb = Margin-Bottom |
| l | Left | ml = Margin-Left |
| r | Right | mr = Margin-Right |
| x | X axis? | mx = -left and -right の両方 |
| y | Y axis? | my = -top and -bottom の両方 |
参考文献
https://zenn.dev/xronotech/articles/2fb5502007fa9c
関連記事
React ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/04/29/000000
React ～ Material UI / 入門編 ～
https://dk521123.hatenablog.com/entry/2025/10/14/224514
