设置 display:inline-block 后负边距不起作用答案

【问题标题】：Negative margin is not working after setting display:inline-block设置 display:inline-block 后负边距不起作用
【发布时间】：2018-03-23 17:37:21
【问题描述】：

我打算在我的图像旁边设置p 标签并稍微移动顶部。代码如下：

    <style>
      * {
        margin:0;
        padding:0;
      }
      p {
        display:inline-block;
        margin-top: -20px;
      }
    </style>
    <body>
      <img src="myimg.png">
      <p>this is the intro of the page</p>
    </body>

我发现无论我为<p> 标签的margin-top 或margin-bottom 设置什么值，它都不会按预期工作，在这里调用display:inline 是否有问题？

【问题讨论】：

CSS display: inline-block does not accept margin-top?的可能重复

标签： html css

【解决方案1】：

您不能像这样在 inline 或 inline-block 元素上设置负边距。您可以添加一个position:relative; 和一个负数。

* {
  margin:0;
  padding:0;
}
p {
  display:inline-block;
  position: relative;
  top: -20px;
}

<img src="http://placehold.it/200x200">
<p>this is the intro of the page</p>

另外，我假设您将更改 CSS？走向全球（通过* 影响所有元素以及p 影响所有段落）似乎相当激烈。更好地使用类并定位你想要的。

【讨论】：

嘿，感谢您的回答乔纳森，这对我有用！只是我有一个问题，top 属性是否与 margin-top 一样？
我个人喜欢在开始时使用 * 来重置所有边距和填充，我想知道这是一个好习惯吗？我是从视频中得到的
太棒了！不太确定“工作相同”是什么意思，因为（如您所见）margin-top 对内联元素没有任何作用。但是，如果您的意思是 top:0; 将其保留在原处并且 top:-10px; 将其向上移动 10 像素，那么是的。
关于*，如果你喜欢这样工作，那很好！只需意识到您必须在段落和标题下方添加边距以进行间距，缩进列表项等。不过，这确实是一个偏好问题。但是对所有段落设置负边距可能不是一个好主意，也不将它们全部设为内联元素；这就是 span 的用途。