似乎无法移动元素[重复]答案

【问题标题】：Can't seem to move an element [duplicate]似乎无法移动元素[重复]
【发布时间】：2016-02-29 20:04:36
【问题描述】：

嘿，我偶然发现了一些看起来很简单而且几乎平庸的东西，但我不能只是绕着它转。

所以我有一个网站并对其应用了一些级联样式表。

这是我在网站顶部谈论的元素。

真的很简单，但由于某种原因，我似乎不能使用边距，也不能使用填充来影响第一行文本（#FFF 白色）。或者更具体地说，边距有效，但不是边距顶部（也不是负底部）。

HTML 看起来像这样

<html>
...
<body>
 <div id = "header">
  <a href="#">I can't margin-top this</a>
  <h1>However it works on this</h1>
</div>
....
</body>

还有这样的样式表。

现在，如您所见，第一个 <a> 应该在 20px 的边距上，但是由于某些奇怪的原因，它似乎不受边距（以及填充）的影响。下面的<h1> 是可操作的。

知道是什么原因造成的吗？

最后但同样重要的是，这里是对<a> 元素的检查

可能有一个简单的解决方案，但我没有练习，我无法真正弄清楚这里有什么问题。

【问题讨论】：

标签： html css

【解决方案1】：

inline 元素不能采用大小或垂直margin/padding，将display:inline-block 传递给<a>，它将接受margin-top

#header a {
display:inline-block;
/* + here your css rules */
}

【讨论】：

解决了。谢谢。完全忘记了内联不能移动的事实。虽然出于好奇，你会推荐这样做吗？（我知道它会起作用，但它更多的是解决这个问题。创建一个单独的 div 或者段落强制它进入一个块不是更好，而不是通过它作为一个内联块应用CSS？）什么是更好的“首选”设计选项？
@Rawrplus 由您决定要提供的显示，除了 inline 之外的任何显示都将其变成一个框。内联块或块级。如果您希望它使用所有可用的宽度并在自身之前和之后换行，block 很有用