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

Question

I was intending to set the p tag next to my image and moving the top a bit. 我打算将p标签设置在图片旁边，并稍微移动顶部。 The code as following: 代码如下：

    <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>

I found no matter what value I set to the margin-top or margin-bottom of the <p> tag, it won't work as expected, is it something problem with calling display:inline here? 我发现无论我将<p>标记的margin-top或margin-bottom值设置为什么值，它都无法按预期工作，在这里调用display:inline是否有问题？

Answer 1

You cannot put a negative margin on an inline or inline-block element like that. 您不能在这样的inline或inline-block元素上放置负边距。 You could add a position:relative; 您可以添加一个position:relative; and a negative top. 和负面的顶部。

 * { 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>

Also, I am assuming that you will change the CSS? 另外，我假设您将更改CSS？ Going that global (by affecting all the elements with * and all the paragraphs with p ) seems rather drastic. 全局化（通过用*影响所有元素，并用p影响所有段落）似乎太过激烈了。 Better to use classes and target what you want. 更好地使用类并针对您想要的内容。

设置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