Question

我实际上是一个使用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锚点上设置上边距，则它对任何大小都没有影响。为什么会这样？

这里有关于这一切工作方式的一般性教训，我要么一直忘记或者还没有完全处理。

我已经阅读了大量的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

CSS - 当保证金无效时要查找的内容

3 个答案: