WordPressの箇条書きで、囲み枠(box)が崩れます

Question

Word Pressで番号無しリストに囲み枠を付けようとすると、画像のように、下の部分だけ不自然な余白が出来てしまいます。

CSSコードはこのようになっています。

また、boxを挿入する際のHTMLはこちらです。

こうなってしまう原因が分かりません。
テーマはAFFINGER5を利用しております。
また、この囲み枠以外でも、全ての囲み枠で同じバグが発生します。

数日間にわたって解決策を探してみたのですが、答えが見つからず...
ご回答頂けますと幸いです。

※追記
わざわざ参考文献を記載して頂いてありがとうございます^^
分かりやすかったです。

どうやらulのmargin-bottom: 20px;によってこの余白が発生しているようです。

※追記②
ご説明頂いたコードを追加したのですが、解決しなかったため追記させて頂きます。
ulに関するCSSで、もう1つこのようなものを発見しました。
2つの追記を組み合わせて、何か問題になりそうな部分は特定出来ますでしょうか？
よろしくお願い致します。

※追記③
.box6 ulの記述が消されてしまっておりました。
対処法などありますでしょうか？

Comments

[Takumiboo]

この部分だけでは、例えばulに適用されているCSSも分かりません。
とりあえずご自身でできることとして、ブラウザの開発者ツールを使って、その余白がどの要素によって出来ているものなのかを調べてみてください。たとえばChromeであれば開発者ツール左上のボタン(Select an element in the page to inspect it)で該当の要素にカーソルを持っていく、もしくは該当部分右クリックで「検証」を開くと、要素の大きさ、padding、marginなどが色分けして表示されます。幅広になってしまっている余白部分がどの要素によるものなのかが分かるはずです。
https://saruwakakun.com/html-css/basic/chrome-dev-tool

[mattyaratte]

ありがとうございます！
余白の原因を特定出来ましたので、追記させて頂きました。
このような形で大丈夫でしたか？

Answer 1

原因はulのmargin-bottomみたいですね。
CSSの該当の箇所を編集してしまえば解決しますが、逆に本文中などでの表示にも影響が出ます。

.box6 ul{
  margin-bottom: 0px;
}
// ほかにboxがあるなら同様に

連番の場合に一括で設定する方法もありますが、注意点もあるので、詳細はリンク先を参照ください。
CSS｜裏技的なセレクタまとめ

Comments

[mattyaratte]

こちらのコードで解決しなかったので、追記させて頂きました。
もう1つulのCSSを見つけたので、こちらを合わせて解決策がありましたらよろしくお願い致します。
長くなってしまって申し訳ありません...。
お時間ありましたらご回答よろしくお願い致します。

[mattyaratte]

連投すみません。
ただ今確認したところ、.box6 ul{
margin-bottom: 0px;
}
の記述が打ち消されてしまっておりました。
対処法などありますでしょうか？

[Takumiboo]

div.box6 ul{
...

に変更するとどうでしょう？
セレクタの優先順位の問題なのですが、すみません今手元で検証できず…。
http://www.htmq.com/csskihon/007.shtml
https://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666

[mattyaratte]

こちらの記述でもやはり同じ結果になってしまいますね...
画像ではulのクラス名?セレクタ?が.postになっていると思うのですが、こちらは関係無いのでしょうか？

[Takumiboo]

.post .box6 ul{
ではどうですか？

[mattyaratte]

.postを付けると、marginやpaddingを設定できるようになり、修正が出来ました！！！
長い間お付き合い頂いて本当にありがとうございました(∩´∀｀)∩
何日も悩んでいたので、すごくスッキリしました...。
フォローさせて頂きますね！

[Takumiboo]

すみません、私も優先順位についてあやふやな部分があり、適切に回答できず申し訳ありませんでした。
基本的には詳細に指定すればするほど優先されます。