javascript - 是什么造成了这两个 html 元素之间的差距？

Question

在添加选项卡的 JavaScript 之前，li 很好地排列在下面的 div 之上，没有间隙。据我所知，当添加 JavaScript 时，它们之间现在存在的差距就出现了。检查 dev site 上选项卡下方的第一个文本项(本例中的 h1)显示已使用 -webkit-margin-before: 0.83em 应用用户代理样式表。将 margin: 0 !important; 放在 h1 上没有任何作用。

编辑:我不知道这是否对任何人有用，但整个问题是因为我更改了 jekyll 使用的 _config.yml 文件，并且之后没有停止并重新启动服务器，所以它没有更新。事实上，另一个错误是我从编译到 _site 文件夹的目录中排除了 sass 文件夹，这导致 sass 中的更改没有反射(reflect)在 jekyll 虚拟服务器上。

function openContent (evt, contentType) {
  var i, tabcontent, tabheads;
  tabcontent =
document.getElementsByClassName('tabcontent');
  for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = 'none';
  }
  tabheads =
document.getElementsByClassName('tabheads');
  for (i = 0; i < tabheads.length; i++) {
      tabheads[i].className =
      tabheads[i].className.replace(' active', '')
  }
  document.getElementById(contentType).style.display =
'block';
  evt.currentTarget.className += ' active';
}
document.getElementById('defaultOpen').click();

.outerDiv {
  background-color: rgba(50, 50, 0, 0.6);
  border-radius: 2rem; }

.innerDiv {
  background-color: rgba(10, 10, 10, 0.6);
  border-radius: 1.5rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  margin: 15px; }
  .innerDiv p {
    padding: 0.5rem 1.2rem; }

ul.tabs {
  display: flex;
  align-items: center;
  margin: 1rem 0 0.3rem 0;
  list-style-type: none;
  height: 2rem; }

.tabs li a {
  padding: 0.5rem 1.2rem 0.5rem 1.2rem;
  background-color: rgba(15, 10, 0, 0.4);
  color: #96912d;
  border-radius: 1.2rem 1.2rem 0 0;
  margin: 0.3rem 0.3rem 0.5rem 0.3rem;
  letter-spacing: 2px; }
  .tabs li a:hover {
    background-color: black;
    color: yellow; }
  .tabs li a:focus, .tabs li a .active {
    background-color: rgba(10, 10, 10, 0.6);
    color: #fac819; }

.under-tabs {
  margin-top: 0; }

.tabcontent {
  display: none; }

<div class="outerDiv">
 <ul class="tabs">
    <li><a href="javascript:void(0)" class="tabheads"
         onclick="openContent(event,'intro')"
         id="defaultOpen">Intro</a></li>
     <li><a href="javascript:void(0)" class="tabheads" onclick="openContent(event,'blog')">Blog</a></li>
     <li><a href="javascript:void(0)" class="tabheads"
         onclick="openContent(event,'comments')">Comments</a></li>
 </ul>
 <div class="innerDiv under-tabs tabcontent"
     id="intro">
	
	<p>
	This project is building a series of virtual colonies on the Moon. 
	</p>
 </div>
</div>

Answer 1

如评论所述，您正在处理默认 margin ，<p>在您的代码段中。

参见 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing了解它如何扰乱您的布局、它的含义以及发生时如何处理。

这里的基本示例是将 p 的 margin-top 重置为零以消除间隙

function openContent (evt, contentType) {
  var i, tabcontent, tabheads;
  tabcontent =
document.getElementsByClassName('tabcontent');
  for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = 'none';
  }
  tabheads =
document.getElementsByClassName('tabheads');
  for (i = 0; i < tabheads.length; i++) {
      tabheads[i].className =
      tabheads[i].className.replace(' active', '')
  }
  document.getElementById(contentType).style.display =
'block';
  evt.currentTarget.className += ' active';
}
document.getElementById('defaultOpen').click();

.outerDiv {
  background-color: rgba(50, 50, 0, 0.6);
  border-radius: 2rem; }

.innerDiv {
  background-color: rgba(10, 10, 10, 0.6);
  border-radius: 1.5rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  margin: 15px; }
  .innerDiv p {
    padding: 0.5rem 1.2rem; }

ul.tabs {
  display: flex;
  align-items: center;
  margin: 1rem 0 0 0;
  list-style-type: none;
  height: 2rem; }

.tabs li a {
  padding: 0.5rem 1.2rem 0.4em 1.2rem;
  background-color: rgba(15, 10, 0, 0.4);
  color: #96912d;
  border-radius: 1.2rem 1.2rem 0 0;
  margin: 0.3rem 0.3rem 0.5rem 0.3rem;
  letter-spacing: 2px; }
  .tabs li a:hover {
    background-color: black;
    color: yellow; }
  .tabs li a:focus, .tabs li a .active {
    background-color: rgba(10, 10, 10, 0.6);
    color: #fac819; }

.under-tabs {
  margin-top: 0; }

.tabcontent {
  display: none; }
p {margin-top:0;

<div class="outerDiv">
 <ul class="tabs">
    <li><a href="javascript:void(0)" class="tabheads"
         onclick="openContent(event,'intro')"
         id="defaultOpen">Intro</a></li>
     <li><a href="javascript:void(0)" class="tabheads" onclick="openContent(event,'blog')">Blog</a></li>
     <li><a href="javascript:void(0)" class="tabheads"
         onclick="openContent(event,'comments')">Comments</a></li>
 </ul>
 <div class="innerDiv under-tabs tabcontent"
     id="intro">
	
	<p>
	This project is building a series of virtual colonies on the Moon. 
	</p>
 </div>
</div>