⑤Elementorで余白(マージン/パディング)を調整する

WEBサイトを作っていると、余白の調整をしたくなります。

今回のテーマであるマージン（margin）とパディング(padding)は、
プラグインElementorだけではなく、
WordPressだろうが、htmlサイトであろうが、アメブロであろうが、
ネットで見れるコンテンツの余白を調整する時に、指定するものです。

以上。

と言ってもイメージがつかないと思うので(笑)
例を出します。

エレメントのマージンとパディング

エレメント(この例ではテキスト)を入れてみました。
分かりやすくするために、背景に色をつけてます。

エレメントの背景：緑
カラムの背景：赤
です。

エレメントを選択した状態で詳細をクリックすると、マージンやパディングが設定できます。
今は入れただけなので、どちらも0です。

エレメントの
マージン：0
パディング：上下50px

するとエレメントの外側に50pxずつ余白が入りました。
余白が入ったので、カラムの背景の赤色に見える部分が増えています。

---

エレメントの
マージン：0
パディング：上下40px　左右20px

今度はエレメントの内側に余白が入っています。
その分、緑色の部分が大きくなりました。

---

エレメントの
マージン：上下10px　左右40px
パディング：上下40px　左右20px

段々分かってきました？

セクションのマージンとパディング

セクションて何？という方はコチラからどうぞ

エレメントの背景：緑
カラムの背景：赤
セクションの背景：グレー

先ほどはエレメントのマージンとパディングを変更しましたが、
今度はセクションのマージンとパディングを変更します。

カラムの外側にはセクションがあります。
セクション(水色の枠)の●9つ＞詳細

セクションの
マージン：0
パディング：上下左右20px

---

セクションの
マージン：上下100px
パディング：上下左右20px

セクションのコンテンツ幅(ボックスと全幅)

実は先ほどから設定していたのはインナーセクションで、その外側に更にセクションがありました(笑)

エレメントの背景：緑
カラムの背景：赤
インナーセクションの背景：グレー
セクションの背景：薄いグレー

エレメントとインナーセクションに、マージンとパディングを設定している例です。

セクションのコンテンツ幅：全幅

カラムの外側にはセクションがあります。
セクション(水色の枠)の●9つ＞レイアウト＞コンテンツの幅＞全幅

セクションのコンテンツ幅：ボックス

セクション(水色の枠)の●9つ＞レイアウト＞コンテンツの幅＞ボックス

あとは色々触って調整してみて下さい～

まとめ