Question

我打算在我的图片旁边设置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>

我发现，无论我为margin-top标记的margin-bottom或<p>设置了什么价值，它都无法按预期工作，这是否与调用{有问题{1}}在这？

Answer 1

您不能在inline或inline-block元素上添加负余量。您可以添加position:relative;和负顶部。

＆＃13;

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

＆＃13;

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

＆＃13;

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

设置display：inline-block后，负边距不起作用

1 个答案: