⑤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つレイアウトコンテンツの幅ボックス

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

まとめ

マージン:外側の余白
パディング:内側の余白

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA