タブ見出しボックスのカスタマイズをしています。

見た目上はうまくできたのですが、環境やボックスの中に入れるタグによってどのような影響があるかわかりません。
ほぼすべての記事で使用しようと考えているので、後々問題が出なさそうかチェックしてほしいです。

やりたいこと

• Cocoon既存の「白抜きボックス」の上にラベルをつけたい
• ボックス（枠）の中は「白抜きボックス」と全く同じにしたい（paddingやmarginなど）
• 旧エディターを使うのでコードをコピペして使う

わからないこと

• 自分の環境以外でうまく表示されているかわからない
• HTMLとCSSで指定するクラス名がわからない（クラス名を全て含める必要があるのか一部だけでいいのか）
• 自分のサイトのタブ見出しボックスとCocoonサイト「Cocoon Blocksの現在の対応状況」の記事内にあるタブ見出しボックスとではクラス名が違っていて、どちらを指定したほうが問題がないのかがわからない
• ボックス（枠）の中が「白抜きボックス」と全く同じになっているかわからない

タブ見出しボックスをカスタマイズしたもの

HTML

<div class="wp-block-cocoon-blocks-tab-caption-box tab-caption-box block-box">
 <div class="tab-caption-box-label block-box-label">
  <span class="tab-caption-box-label-text block-box-label-text">見出し</span>
 </div>
 <div class="tab-caption-box-content">
  <p>テスト</p>
  <p>テスト</p>
  <ul>
   <li>テスト</li>
   <li>テスト</li>
  </ul>
 </div>
</div>

CSS

.tab-caption-box-label {
  padding: 5px 10px;
  font-size: .9em;
  background-color: #949495;
  display: inline-block;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color: #ffffff;
}
.tab-caption-box-content {
  margin-top: -3px;
  border-width: 3px;
  border-style: solid;
  border-color: #949495;
  padding: var(--cocoon-box-padding);
  border-radius: 0 4px 4px 4px;
  border-top-left-radius: 0;
}

• 指定するクラス名ですが、例えば「wp-block-cocoon-blocks-tab-caption-box tab-caption-box block-box」ではなく「tab-caption-box」だけでいいのでしょうか？
  足りない・追加したほうがいいなどあれば教えていただきたいです。
• ボックス（枠）の中のpaddingは「var(--cocoon-box-padding)」で問題ないのでしょうか？
• 自分のサイトではタブ見出しボックスのクラス名が「wp-block-cocoon-blocks-tab-caption-box-1 tab-caption-box block-box not-nested-style cocoon-block-tab-caption-box」になるが、Cocoonの記事内では「wp-block-cocoon-blocks-tab-caption-box tab-caption-box block-box」になっているのが気になります
  （あえて「wp-block-cocoon-blocks-tab-caption-box tab-caption-box block-box」のほうでカスタマイズしていますがちゃんと表示されています）

自作したタブ見出しボックス

HTML

<div class="label-heading-box">
 <div class="label-heading-box-title">見出し</div>
 <div class="label-heading-box-content">
  <p>テスト</p>
  <p>テスト</p>
  <ul>
   <li>テスト</li>
   <li>テスト</li>
  </ul>
 </div>
</div>

CSS

.label-heading-box {
  margin-bottom: 1.8em;
}
.label-heading-box-title {
  font-size: 0.9em;
  display: inline-block;
  color: #fff;
  background-color: #949495;
  border: 1px solid #949495;
  border-radius: 4px 4px 0 0;
  padding: 5px 10px;
}
.label-heading-box-content {
  margin-top: -3px;
  border: 3px solid #949495;
  border-radius: 0 4px 4px 4px;
  padding: var(--cocoon-box-padding);
}

こちらでは、ボックス内の最後の行下にmarginができてしまいます。

長い文章になって申し訳ありません。
よろしくお願いします。

URL : https://fc2wordpresstest.fc2.page/test/

----------------------------------------------
サイト名：てすと
サイトURL： https://fc2wordpresstest.fc2.page/wordpress
ホームURL： https://fc2wordpresstest.fc2.page
コンテンツURL：/wordpress/wp-content
インクルードURL：/wordpress/wp-includes/
テンプレートURL：/wordpress/wp-content/themes/cocoon-master
スタイルシートURL：/wordpress/wp-content/themes/cocoon-child-master
親テーマスタイル：/wordpress/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wordpress/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：6.5.2
PHPバージョン：7.4.18
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br, zstd
言語：ja
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.3.1
カテゴリー数：1
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：1666 バイト
functions.phpサイズ：203 バイト
----------------------------------------------
Gutenberg：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wordpress/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
----------------------------------------------