ボックス内にテキストや要素がない場合非表示にする方法

Question

ボックスというと適切な表現ではないかもしれませんが、こちらの画像のような形にしたいのですがうまくいきません。

現在はこのような状態です。

<div>や<p>内にテキストがある場合は表示され、ない場合は非表示のものにしたいです。 ↓このような場合は非表示になる <ul class="memo" > <p></p> </ul>

ご教示のほどよろしくお願いいたします。

画像内のコードを以下に記載します。

<ul class="memo" id="ab11" uid="1000">
 <div class ="sub_note" id="ab12"></div>

<ul class="memo" >
 <div class ="sub_note"></div>
</ul>

<ul class="memo" >
 <p></p>
</ul>

ul .memo {
    line-height: 1.5;
    padding: 2%;
    background-color: #ebf4f1;
    margin-bottom: 10px;
}

Comments

[yambejp]

クォートがおかしいのは半角に直してください

[9n9]

コードの方を直しました。ご指摘ありがとうございます。

[Lhankor_Mhy]

問題とは直接関係しませんが、ul要素の子要素はli要素です。
つまり、HTML文法違反です。

[Lhankor_Mhy]

質問タグの範囲では難しいと思います。
JavaScript の使用を検討した方がいいかと思います。

[9n9]

確かに要素おかしいですね。ご指摘ありがとうございます。
疑似クラスでできないか調べていましたが、やはり難しいでしょうか。
タグが変更できるか確認します。またご回答いただけますと幸甚です。

Answer 1

内容が無いボックスに色が付いている部分はパディングです。
なので

padding: 2%;

を

padding: 0;

にすれば、ボックスに内容が無い場合ボックスは表示上無くなると思います。

パディングは無くなりますが、その代わり上下の幅をline-heightで調整することができると思います。
左右については、たとえば左についてだけなら

padding-left: 10px;

などのように指定できると思います。ただ、「理想のカタチ」のとおりにしたいのなら中央配置するようなので

text-align: center;

にすることになるのでしょうか。それなら左右のパディングを意識する必要はあまりないですね。

質問への追記・修正依頼欄で指摘された通り提示のHTMLコードには違反がありますので、それは適切に対処してください。