5

我实际上是 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 年了。我知道有很多怪癖和陷阱，我就是想不起来。

谢谢。

4

3 回答 3

10

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

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

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

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

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

如果您随后面临不希望自己a的宽度如此之大，但又紧贴其他元素的位置，则可以将display属性更改为inline-block-- 这可以被认为是块元素和内联元素之间的一种中间方式。它只会和里面的文本一样宽，但它会在它周围形成一个虚构的矩形，然后可以通过边距和填充将其变大。

这里有一些阅读：CSS 盒子模型

于 2013-08-01T10:23:33.063 回答
2

很抱歉误解了你的问题。

你需要将你的转换<a>成一个inline-block元素才能工作。

这是代码。

编码：

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

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

于 2013-08-01T10:17:52.587 回答
0

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

于 2013-08-01T10:26:40.337 回答