CSS - 当保证金无效时要寻找什么[重复]

Question

我实际上是 HTML 和 CSS 的菜鸟，我不会一直生活在这个领域来保留和进步，所以请随意把我当作白痴对待。

当我为页面设置样式时，页边距通常不起作用。比如在下面的sn-p中：

<h1>Title</h1>
<p>I introduce the section and talk about the stuff in this area.</p>
<div class="preWrapper">
  <pre><code>I am some XML</code></pre>
</div>
<div class="controlsWrapper">
  <a href="...">Download XML</a>
  < ... form controls, input etc. ... >
<div>

如果我尝试在下载 XML 锚点上设置上边距，它对任何大小都没有影响。为什么会这样？

这里有没有关于这一切工作方式的一般教训，我要么一直忘记，要么还没有完全掌握。

我已经从头到尾阅读了大尺寸的 CSS 书籍 - 我确实尝试过 - 我成为 netmag 订阅者已经大约 6 年了。我知道有很多怪癖和陷阱，我就是记不住。

谢谢。

Answer 1

我认为在这些情况下，您可能主要会遇到块级元素和内联元素之间的差异。

在 HTML 中，块级元素用于较大的内容部分，并且通常包含其他元素。您可以使用它们来布置页面上的所有内容。例如，块级元素是section、div、header。

内联元素是包含链接或小块文本的较小标签，例如a 或span。虽然块级元素会自动将自己放置在布局中的新行上，但根据定义，内联元素将完全保留在标记中的位置。

由于这种区别，块级元素通常可以看作是在一个不可见的、明确定义的块内，通常跨越页面的宽度。使用这样的块，您可以轻松想象填充和边距，因为它的边缘定义明确。然而，内联元素很棘手，并且不会在任何特定的块或矩形内呈现自己——它们的尺寸仅在它们内部的文本上定义。这就是为什么应用边距更加困难的原因。

上面的解决方法是在 CSS 中为您的 a 提供 display: block 样式。然后默认情况下它将占据页面的整个宽度，并且其高度将与文本大小所需的一样大。可以轻松添加边距和填充。

如果你不想让你的a 太宽，而是将自己紧贴在其他元素旁边，你可以将display 属性更改为inline-block——这可以被认为是介于块元素和内联元素之间。它只会和里面的文本一样宽，但它会在它周围形成一个虚构的矩形，然后可以通过边距和填充将其变大。

这里有一些阅读：The CSS box model

Answer 2

很抱歉误解了您的问题。

您需要将<a> 转换为inline-block 元素才能使其工作。

这里是代码。

守则：

<a href="..." style="display: inline-block; margin-top: 40px;">Download XML</a>

PS： 40px 是 margin-top 的虚拟值。您可以将其替换为您的值。

Answer 3

如果您定义了元素的相对位置或绝对位置，则时间边距值将不起作用，为此您可以尝试使用top