stack stack - 3 months ago 7
CSS Question

How can I remove element's height when its value is empty?

I have a HTML structure like this:



li{
list-style: none;
border-bottom: 1px solid;
padding:4px;
}

div{
background-color: #eee;
padding: 6px 0;
}

<ul>
<li>
<span>something</span>
<div></div>
</li>
<li>
<span>something</span>
<div>something else</div>
</li>
</ul>





And this is expected result:

enter image description here

I guess I can do that by JS, something like this:

if ( $('div').val() == '' ) {
$('div').hide();
}


But I want to know can I do that by pure HTML and CSS ?

Answer

If you need old browser support, you could just use line height for spacing instead.

 li{
      list-style: none;
      border-bottom: 1px solid;
      padding:4px;
    }
    
    div{
      background-color: #eee;
      // padding: 6px 0;
      line-height: 2;
    }
<ul>
  <li>
    <span>something</span>
    <div></div>
  </li>
  <li>
    <span>something</span>
    <div>something else</div>
  </li>
</ul>