ボックスのサイズと余白
ボックスの大きさってどうやって変えるの？
ボックスのサイズは、幅（Width）と高さ（Height）で調整できるよ！
さらに、マージンとパディングで余白も調整できるんだ。
Width（幅）の設定
まずは幅の設定から見ていこう！
右パネルの一番上に、幅を設定する項目があるよ。
この数字を変えると、ボックスの幅が変わるんだね！
そうそう！単位も選べるんだ：
- px（ピクセル）: 固定の大きさ（例：300px）
- %（パーセント）: 親要素に対する割合（例：50%）
- auto: 中身に合わせて自動調整
どの単位を使えばいいの？
それぞれ使いどころが違うんだ：
- px：正確なサイズが必要な時（ロゴやボタンなど）
- %：画面サイズに応じて伸縮させたい時
- auto：コンテンツ量に応じて自動で調整したい時
Height（高さ）の設定
高さも同じように設定できるよ！
幅と同じような感じだね。
そうだね！高さも px、%、auto が使えるよ。
ただ、高さは auto にしておくことが多いんだ。
中身のコンテンツ量に応じて、自動的に伸びてくれるからね。
Margin（マージン）の設定
マージンって何？
マージンは、ボックスの外側の余白のことだよ！
他の要素との距離を調整するのに使うんだ。
マージンは4方向別々に設定できるよ：
- 上（Top）：ボックスの上の余白
- 右（Right）：ボックスの右の余白
- 下（Bottom）：ボックスの下の余白
- 左（Left）：ボックスの左の余白
4つとも同じ値にしたい時はどうするの？
真ん中のリンクアイコンをクリックすると、4つ全部が連動するよ！
1つの値を変えると、全部が同じ値に変わるんだ。
Padding（パディング）の設定
パディングはマージンと何が違うの？
いい質問！マージンとパディングの違いはこうだよ。
- マージン：ボックスの外側の余白
- パディング：ボックスの内側の余白
パディングもマージンと同じように、4方向別々に設定できるよ。
リンクアイコンで連動もできるんだ。
具体的にどう使い分ければいいの？
例を見てみよう！
ボタンを作る時、テキストとボタンの枠の間の余白はパディングで調整するんだ。
ボタンと他の要素の間の余白はマージンで調整するよ。
まとめ
サイズと余白の調整は、デザインの基本中の基本！
たくさん練習して、感覚を掴んでいこうね。