Question

在添加标签的JavaScript之前，li排在div下方，没有任何差距。尽管我已经知道了，但是当添加JavaScript时，它们之间存在的差距就会出现。检查dev site（本例中为h1）选项卡下方的第一个文本项，显示已使用-webkit-margin-before: 0.83em应用了用户代理样式表。将margin: 0 !important;放在h1上没有任何作用。

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

＆＃13;

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();

＆＃13;

.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; }

＆＃13;

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

＆＃13;

Answer 1

评论说，您正在处理片段中的defaut margin <p>。

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing，了解它如何影响您的布局，它是什么以及如何处理它。

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

＆＃13;

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();

＆＃13;

.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;

＆＃13;

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

＆＃13;

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

1 个答案: