wordpressのlightning無料版のヘッダー下の余白を消したい

Question

実現したいこと

wordpressのlightning無料版で、
トップページにあるスライドショーを非表示にした時、ヘッダーと次のコンテンツの間にある余白をなくしたいです。

発生している問題・分からないこと

スライドショーの下に、固定ページで作成したフロントページが表示されるようにしています。
スライドショーを非表示にた際に、ヘッダーと固定ページ（フロントページ）の間に余白があります。

この余白をなくすか、幅を調整したいのですが、カスタムCSSで色々と追加し試しましたが機能しません。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

検索しても同じ事案がなく、自分で解決できませんでした。

補足

lightning無料版のデモサイトです。
https://demo.dev3.biz/lightning-g3/

スライドショーを非表示にした際に、ヘッダーと、メガネの画像がくっつくようなイメージで配置したいです。今はどうやってもヘッダーとメガネの間にスペースが入ってしまいます。

Comments

[juner]

class の vk_block-margin-lg--margin-top が伝播する margin-top でスペース空けさせていますね。
具体的には仕様としては下記の動作ですね
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing#%E8%A6%AA%E3%81%A8%E5%AD%90%E5%AD%AB%E3%82%92%E9%9A%94%E3%81%A6%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%8C%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88

Answer 1

これは マージンの相殺 を使った挙動の一つで 親と子孫を隔てるコンテンツがない場合 マージンが折り畳まれて 親のマージンとして現れる 挙動ですね。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing#%E8%A6%AA%E3%81%A8%E5%AD%90%E5%AD%AB%E3%82%92%E9%9A%94%E3%81%A6%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%8C%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88

このサンプルだと次の箇所ですね。

要素でいうとこの vk_block-margin-lg--margin-top クラスのところ

実際の位置でいうと このあたり

以上。

Comments

[hjk356]

ありがとうございます！
追加cssに下記を追加してみたのですが、変化ありませんでした。

.vk_block-margin-lg--margin-top {
margin-top: 0 !important;
}

ご指摘いただきたいです。
よろしくお願いします。

[juner]

下記の様になっているので 順番によりそう？というか直接タグ消したりできないんです？
```css
.vk_block-margin-lg--margin-top {
margin-top: var(--vk-margin-lg) !important;
}
```
https://developer.mozilla.org/ja/docs/Web/CSS/important

ちなみに本来のスタイルを完全に壊していいならこれで行けます
```css
:root {
--vk-margin-lg:0;
}
```
!important は 優先度を逆にするので ライブラリの .vk_block-margin-lg--margin-top の margin-top プロパティ よりも前にその宣言が入っていれば上書きできます。

[hjk356]

試しに
:root {
--vk-margin-lg:0;
}
を追加したところ、変えたい部分は変わらず、
他の場所のマージンは全てなくなりました。

ということはマージンではないのでしょうか。。

[juner]

実際にどんなコードにしているかがこれ以上はわからないので何とも言えないのですが……
私は .wp-block-vk-blocks-slider を非表示にして 動作みているのですが、その余白は回答に貼った上記位置の余白ではないのでしょうか？

[hjk356]

ご指摘いただき、色々と触っていたのですが、
lightningのデザイン設定から余白設定というのがあり、ここを触ったら余白がなくなりました！

ありがとうございました！