删除 <span> 和 <list> 条目之间的垂直 space

Remove vertical space between <span> and <list> entries

我搜索了Whosebug,并没有发布任何类似的问题。如果我错过了一个,我深表歉意。

我正在 RStudio 中创建一个 R 演示文稿。我想删除 "Preprocessing" 和列表项之间的垂直 space。我找不到解决方案。我还想删除列表项之间的垂直 space。请参阅下面的代码和屏幕截图:

<style>
.reveal p {font-size: 35px;}
.reveal ul,
.reveal li,
.reveal ol {
  font-size: 20px;
  padding: 0px 0px 0px;
  margin-bottom: 0px;  
}
.reveal li:after,
.reveal li:before {
     height: 0px;  // or px or em or whatever
     width: 0px;  // or whatever space you want
}
span {
    display: inline-block;
}
span.mypara2 {
    color: blue;
    font-size: 30px;
}
</style>


First Slide
========================================================

<span class="mypara2">Preprocessing</span> 
<ol>
  <li>List1</li>
  <li>List2</li>
  <li>List3</li>
</ol>

更新:

这是我根据@phil 进行更改后的屏幕截图。

您必须将 <ol> 元素的上边距设置为零:

<ol style="margin-top: 0;">
  <li>List1</li>
  <li>List2</li>
  <li>List3</li>
</ol>

当然,也可以使用您的样式表来完成此操作,这在大多数情况下更可取。

那个space是你<OL> element的边距。 大多数浏览器将显示具有以下默认值的 <ol> element

ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

Source

解决方案非常简单:

  1. 在您的样式表中添加 .reveal ol { margin-top: 0; }
  2. 内联添加<ol style="margin-top: 0;">
  3. 使用重置"Google Search"
  4. (尚未广泛支持:使用 .reveal ol { all: unset }

Can i use all?

.reveal li,
.reveal ol {
  font-size: 20px;
}
.reveal ol {
  margin: 0px auto;
}
span.mypara2 {
  color: blue;
  font-size: 30px;
  display: inline-block;
}
<h3>First Slide</h3>
<hr>
<div class="reveal">
  <span class="mypara2">Preprocessing</span> 
  <ol>
    <li>List1</li>
    <li>List2</li>
    <li>List3</li>
  </ol>
</div>