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

Question

我想在与ul属性的计算值完全相等的li（或最后一个line-height）中添加底部填充位于ul和li处（它们都继承了它们的line-height）。换句话说，我希望“项目3”下的空白与添加“项目4” li的大小相同。有可能吗？

请注意，如果em不等于1，则rem和line-height单位将无法实现这一目标。另外，请考虑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

我希望这是您想要的。

<ul>的总高度为80px，每个项目的行高均为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

仅使用 CSS 就无法获得计算出的line-height。因此，仅凭 CSS 不能基于padding-bottom动态更改line-height。

因此，您也可以使用::pseudo元素进行操作，该元素可以采用其 parent 高度。充当新的<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: Find DIV's line-height, not CSS property but actual line-height

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

  

这可以达到所需的外观，但是对于这样一个简单的用例，必须使用伪元素只是感觉不对。

在这种用例中使用::pseudo元素没有错。

Answer 3

您可以使用jquery来做到这一点，但是您应用的方法比jquery的方法更好。参见下面的示例。

$(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>