如何添加正好1行高的填充或边距

Question

我想在底部填充ul(或到最后一个li)添加底部填充,它恰好等于line-height属性at 的计算值ul和li(它们都继承它们line-height).换句话说,我希望在"项目3"下的白色空间大小与li添加"项目4"相同.那可能吗？

需要注意的是em与rem单位没有做到这一点,如果line-height不等于1.此外,考虑到"环境"中的ul生活是未知的.例如,我不知道是否body有line-height: 1.1,line-height: 2等等.

我希望在此图像中将蓝色空间作为填充.

这实现了期望的外观,但是对于这样一个简单的用例而言必须使用伪元素是错误的.

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

line-height您无法仅使用CSS进行计算。话虽如此，仅使用padding-bottomCSS动态更改 是不可能的。line-height

因此，要么执行您已经使用该元素所做的操作::pseudo，该元素可以获取其父级高度。充当新<li>元素。

或者使用JavaScript，可以这样完成

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：查找 DIV 的行高，不是 CSS 属性，而是实际行高

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

这实现了所需的外观，但对于如此简单的用例必须使用伪元素感觉是错误的。

::pseudo在这样的用例中使用元素并没有什么错。