How to add padding or margin of exactly 1 line-height

Question

I want to add bottom padding to the ul (or to the last li) that is exactly equal to the computed value of the line-height property at ul and li (they both inherit their line-height). In other words, I want white space under "Item 3" of the same size as if an "Item 4" li was added. Is that possible?

Note that em and rem units don't achieve this if line-height is not equal to 1. Also, consider that the "environment" in which the ul lives is unknown. For example, I don't know if body has line-height: 1.1, line-height: 2, etc.

I want to have the blue space in this image as padding.

This achieves the desired look, but it just feels wrong to have to use pseudo-elements for such a simple use-case.

ul {
  list-style: none;
  background: #ccc;
}

ul::after {
  content: "\00a0";
  display: list-item;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Answer 1

I hope this is what you are looking for.

Total height of <ul> is 80px and each item has line-height of 20px.

:root {
  --custom-height: 20px; 
}
ul {
  list-style: none;
  padding-bottom: var(--custom-height);
}
li{
   line-height: var(--custom-height);
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Answer 2

You can't get the computed line-height just using CSS. So with that said, its not possible to dynamicaly change the padding-bottom based on the line-height with CSS only.

So either do what you already did using the ::pseudo element, which can take its parent height. Acting as a new <li> element.

Or use JavaScript, that could be done like this

var ul = document.querySelectorAll('ul');
var li = document.querySelectorAll('ul li');

for(var i = 0;i < ul.length;i++) {
  ul[i].style.paddingBottom = li[0].clientHeight + 'px';
}

ul {
  list-style: none;
  background: #ccc;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

JavaScript: Find DIV's line-height, not CSS property but actual line-height

https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

This achieves the desired look, but it just feels wrong to have to use pseudo-elements for such a simple use-case.

There is nothing wrong to use ::pseudo elements for such a use-case.

Answer 3

You can do it using jquery, But the approach you've applied is better than jquery approach. see below example.

$(document).ready(function(){
  var get_padding = $('ul>li').css('font-size');
  $('ul>li:last-child').css('padding-bottom',get_padding);
});

ul {
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>