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

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>

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

Answer 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影响所有段落）似乎太过激烈了。 更好地使用类并针对您想要的内容。

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

问题描述

1 个解决方案

解决方案1
0 2017-10-11 22:26:44

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

问题描述

1 个解决方案

解决方案1 0 2017-10-11 22:26:44

解决方案1
0 2017-10-11 22:26:44