[ 解決済 ] Outerブロック内上下余白について

[leafletweb]

■ 利用テーマとバージョン :
Lightning　G3
■ 質問内容：
Outerブロック内のレイアウト設定で「余白（上下）」としても底辺側だけに大きく余白が入ってしまいます。
これをなくすことはできないでしょうか？

Attachments:

You must be logged in to view attached files.

[leafletweb]

すみません。中途半端な状態で投稿してしまいました。
再度投稿させて頂きます。
———————————————
Outerブロック内のレイアウト設定で「余白（上下）」のところで
「標準の余白を使用しない」としても底辺側だけに大きく余白が入ってしまいます。
これをなくすことはできないでしょうか？

[対馬 俊彦]

添付画像から推測すると、その部分は Outer ブロック内の余白ではなく、段落ブロックの margin-bottom が原因のような気がします。

これがご期待通りの回答でないとすると、可能であれば実際の URL を提示していただければ的確な回答が得られるかもしれません。

[leafletweb]

ありがとうございます。
コードではどうでしょうか？
————————————————————————
<div class=”wp-block-vk-blocks-outer vkb-outer-2c28249d-2909-4e04-b69d-3290b6fd7948 vk_outer vk_outer-width-normal vk_outer-paddingLR-zero vk_outer-paddingVertical-none vk_outer-bgPosition-normal” style=”border:1px solid #abb8c3;border-radius:0px”><style>.vkb-outer-2c28249d-2909-4e04-b69d-3290b6fd7948{background: linear-gradient(rgba(243, 244, 245, 0.5), rgba(243, 244, 245, 0.5)); }</style><div><div class=”vk_outer_container”><!– wp:paragraph –>
<p>↓下に余白が入ってしまう</p>
<!– /wp:paragraph –></div></div></div><style type=”text/css”>
.vkb-outer-2c28249d-2909-4e04-b69d-3290b6fd7948 .vk_outer_container{
padding-left:0px;
padding-right:0px;
}
@media (min-width: 577px) {
.vkb-outer-2c28249d-2909-4e04-b69d-3290b6fd7948 .vk_outer_container{
padding-left:0px;
padding-right:0px;
}
}
@media (min-width: 769px) {
.vkb-outer-2c28249d-2909-4e04-b69d-3290b6fd7948 .vk_outer_container{
padding-left:0px;
padding-right:0px;
}
}
</style>
——————————————————————————
上記はテキストでPタグが入ってますが

実際はOuterブロック内にカラムブロックを入れたいのですが、入れると
—————————————————————————-
<div class=”wp-block-vk-blocks-outer vkb-outer-9289624c-5629-4239-af64-96ce90452a3b vk_outer vk_outer-width-normal vk_outer-paddingLR-zero vk_outer-paddingVertical-none vk_outer-bgPosition-normal” style=”border:1px solid #abb8c3;border-radius:0px”><style>.vkb-outer-9289624c-5629-4239-af64-96ce90452a3b{background: linear-gradient(rgba(243, 244, 245, 0.5), rgba(243, 244, 245, 0.5)); }</style><div><div class=”vk_outer_container”><!– wp:columns –>
<div class=”wp-block-columns”><!– wp:column {“width”:”33.33%”} –>
<div class=”wp-block-column” style=”flex-basis:33.33%”><!– wp:image {“id”:807,”sizeSlug”:”large”,”linkDestination”:”media”} –>
<figure class=”wp-block-image size-large”></figure>
<!– /wp:image –></div>
<!– /wp:column –>

<!– wp:column {“width”:”66.66%”} –>
<div class=”wp-block-column” style=”flex-basis:66.66%”></div>
<!– /wp:column –></div>
<!– /wp:columns –></div></div></div><style type=”text/css”>
.vkb-outer-9289624c-5629-4239-af64-96ce90452a3b .vk_outer_container{
padding-left:0px;
padding-right:0px;
}
@media (min-width: 577px) {
.vkb-outer-9289624c-5629-4239-af64-96ce90452a3b .vk_outer_container{
padding-left:0px;
padding-right:0px;
}
}
@media (min-width: 769px) {
.vkb-outer-9289624c-5629-4239-af64-96ce90452a3b .vk_outer_container{
padding-left:0px;
padding-right:0px;
}
}
</style>
———————————————————————————
こうなってしまい同じように結構な空白ができてしまいます。
（画像添付しました）
長くなってすみません。
宜しくお願い致します。

• この返信は3年、 4ヶ月前にleafletwebが編集しました。

Attachments:

You must be logged in to view attached files.

[leafletweb]

連投ですみません。
空白部分をgoogle chromeの「検証」でみた状態を画像添付しました。
2つの空白があることがわかります。
どうでしょうか？
宜しくお願い致します。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

Outer ブロックに入っている以下のブロックも下余白 margin-bottom を持っています。

• カラム
• 画像
• 段落

それぞれのブロックを margin-bottom :0; にすれば、おそらくご希望のレイアウトに近づくとと思いますが、それだけだとスマホで見たときに残念な結果になってしまう気がしますので、メディアクエリを使う必要がありそうです。

段落はいじらなくてよさそうなので、以下の CSS をベースにやってみてください。

.wp-block-columns {
margin-bottom: 0;
}
.wp-block-image {
margin-bottom: 0;
}

参考ページ ↓

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

メディアクエリについて書かれている部分は上記ページの「3.7. 画面サイズ毎での指定」です。

[leafletweb]

ありがとうございます。
とても分かりやすくご説明頂き助かりました。
お陰様で思い通りのレイアウトにできました。
ありがとうございました。

[投稿者]

投稿