⑤Elementorで余白(マージン/パディング)を調整する
WEBサイトを作っていると、余白の調整をしたくなります。
今回のテーマであるマージン(margin)とパディング(padding)は、
プラグインElementorだけではなく、
WordPressだろうが、htmlサイトであろうが、アメブロであろうが、
ネットで見れるコンテンツの余白を調整する時に、指定するものです。
パディング:内側の余白
以上。
と言ってもイメージがつかないと思うので(笑)
例を出します。
Contents
エレメントのマージンとパディング
エレメント(この例ではテキスト)を入れてみました。
分かりやすくするために、背景に色をつけてます。
エレメントの背景:緑
カラムの背景:赤
です。
エレメントを選択した状態で詳細をクリックすると、マージンやパディングが設定できます。
今は入れただけなので、どちらも0です。
エレメントの
マージン:0
パディング:上下50px
するとエレメントの外側に50pxずつ余白が入りました。
余白が入ったので、カラムの背景の赤色に見える部分が増えています。
エレメントの
マージン:0
パディング:上下40px 左右20px
今度はエレメントの内側に余白が入っています。
その分、緑色の部分が大きくなりました。
エレメントの
マージン:上下10px 左右40px
パディング:上下40px 左右20px
段々分かってきました?
セクションのマージンとパディング
セクションて何?という方はコチラからどうぞ
エレメントの背景:緑
カラムの背景:赤
セクションの背景:グレー
先ほどはエレメントのマージンとパディングを変更しましたが、
今度はセクションのマージンとパディングを変更します。
カラムの外側にはセクションがあります。
セクション(水色の枠)の●9つ>詳細
セクションの
マージン:0
パディング:上下左右20px
セクションの
マージン:上下100px
パディング:上下左右20px
セクションのコンテンツ幅(ボックスと全幅)
実は先ほどから設定していたのはインナーセクションで、その外側に更にセクションがありました(笑)
エレメントの背景:緑
カラムの背景:赤
インナーセクションの背景:グレー
セクションの背景:薄いグレー
エレメントとインナーセクションに、マージンとパディングを設定している例です。
セクションのコンテンツ幅:全幅
カラムの外側にはセクションがあります。
セクション(水色の枠)の●9つ>レイアウト>コンテンツの幅>全幅
セクションのコンテンツ幅:ボックス
セクション(水色の枠)の●9つ>レイアウト>コンテンツの幅>ボックス
あとは色々触って調整してみて下さい~
まとめ
パディング:内側の余白