我实际上是 HTML 和 CSS 的菜鸟，我不会一直生活在这个空间中以保持和进步，所以请随意把我当作白痴。
当我设计页面样式时，页边距常常不起作用。例如，在以下代码段中:
<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 anchor 上设置上边距，它在任何尺寸下都没有效果。为什么会这样？
这里是否有关于这一切运作方式的一般性教训，我要么一直忘记，要么还没有完全掌握。
我已经从头到尾阅读了大型 CSS 书籍 - 我确实尝试过 - 我已经成为 netmag 订阅者大约 6 年了。我知道有很多怪癖和陷阱，只是我记不住它们。
谢谢。
我认为在这些情况下，您可能主要遇到 block 级元素和内联元素之间的差异。
在 HTML 中， block 级元素用于较大的内容部分，并且通常包含其他元素。您可以使用它们来布置页面上的所有内容。 block 级元素是，例如，section、div、header。
内联元素是包含链接或小块文本的较小标签，如 a 或 span。虽然 block 级元素会自动将它们自己放在布局中的新行上，但根据定义，内联元素将准确保留在标记中的位置。
由于这种区别， block 级元素通常可以被认为是在一个不可见的、明确定义的 block 中，该 block 通常跨越页面的宽度。使用这样的 block ，您可以轻松想象填充和边距，因为它的边缘定义明确。然而，内联元素很棘手，它们不会在任何特定的 block 或矩形内呈现它们自己——它们的尺寸仅根据它们内部的文本定义。这就是应用边距更难的原因。
上面的解决方法是在 CSS 中为您的 a 提供 display: block 样式。然后它将默认占据页面的整个宽度，其高度将与文本大小所需的一样大。可以轻松添加边距和填充。
如果您不想让 a 太宽，而是将其紧贴在其他元素旁边，您可以将 display 属性更改为 inline-block——这可以被认为是 block 元素和内联元素之间的一种中间方式。它只会和里面的文本一样宽，但它会在它周围形成一个假想的矩形，然后可以通过边距和填充使它变大。
这里有一些阅读:The CSS box model