填充顶部导致 Div 外边距 - 了解 DOM答案

【问题标题】：Padding Top Causing Margin Outside Div - Understanding the DOM填充顶部导致 Div 外边距 - 了解 DOM
【发布时间】：2019-03-29 12:14:59
【问题描述】：

我是一名编程专业的学生，我认为我已经取得了很大的进步，但最近我遇到了一个我无法弄清楚的问题。

首先，考虑位于HERE的页面。

这是我正在为我的一个项目制作的页面。我在HERE 中找到了一个保持纵横比的技巧，并试图利用它来获得我想要的外观。

出乎意料的是，在我的案例中使用这个技巧会在显示底部的包含 div 中产生不需要的边距。我尝试了各种方法来解决这个问题，但无济于事。最后，我只是选择使用 jQuery 来解决这个问题。我使用的代码如下：

HTML：

(function($) {
  var thingHeight = $('#mainPic').css("height");
  $('#thing').css("height", thingHeight);
})(jQuery);

#opacity {
  background-color: #c5d8d8;
  position: absolute;
  z-index: 1;
  opacity: 0.4;
  height: 100%;
  width: 100%;
}

#mainPic {
  width: 100%;
  z-index: -1;
  background: url('http://nexteratech.org/wp-content/uploads/2018/10/43146453_314512212434998_6895115624842788864_n.jpg');
  padding-top: 33.3%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

#mainHeaderText {
  z-index: 2;
  position: relative;
  bottom: 250px;
  text-decoration: underline #97ef94;
  color: #00353f;
  font-size: 70px;
  line-height: 70px;
  left: 20px;
}

#headerParagraph {
  z-index: 2;
  position: absolute;
  bottom: 249px;
  left: 20px;
  font-size: 30px;
  color: #003366
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="opacity"></div>

<div id="mainPic">
  <h1 id="mainHeaderText">NETWORKING & ADMINISTRATION SOLUTIONS
  </h1>
  <p id="headerParagraph">Affordable I.T., server, and cloud solutions for any business size.</p>
</div>

这也没有导致任何改变。我经历了一系列诊断测试和理论，试图找出没有解决方案的问题。 jquery 工作正常，不是我的主题（Avada），css 都输入正确等，但仍然没有。最后，我只是继续给#mainPic 一个高度值，这是我希望避免的，以允许移动友好的适应，瞧！不需要的边距消失了。

我想知道为什么？首先是什么导致了边距，为什么jquery没有改变它，为什么即使#mainPic的高度为0它也会消失？

请原谅我的无知和这个问题的长度。感谢您提前提供任何帮助。 :)

【问题讨论】：

在提供的示例中，#mainPic 上的边距是正文元素的默认边距。使用 css 重置，问题就会消失。

标签： jquery html css dom padding

【解决方案1】：

您提供的 sn-ps 很难准确地告诉 为什么。您还可以尝试在 JSFiddle 中为我们重新创建您的问题，这可能有助于排除是否有任何外部库影响您的网站。

我喜欢用来调试保证金问题等的工具是 Paul Molluzo 的 Pesticide for Chrome extension

【讨论】：