设置显示后负边距不起作用：内嵌块

我打算在我的图像旁边设置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或<p>标签的margin-bottom什么价值，因为预期它不会工作，是什么问题打电话display:inline这里？

来源

2017-10-11 mystreie

[CSS display：inline-block可能不会接受margin-top？]（https://stackoverflow.com/questions/7611030/css-display-inline-block-does-not-accept-margin-顶部） – Jonathan

您不能对这样的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）的元素似乎相当激烈。更好地使用类并定位你想要的东西。

来源

2017-10-11 22:26:44 Jonathan

嘿感谢您的回答乔纳森，这对我很有用！只是我有一个问题是最高的财产是一样的边缘顶部在这里？ – mystreie

我个人喜欢在开始时重置所有的边距和填充，我想知道这是一个好习惯吗？我从视频中得到了这个 – mystreie

太棒了！不太清楚你的意思是“同样的工作”，因为（正如你所见），margin-top不会对内联元素做任何事情。但是，如果你的意思是'top：0'，'把它放在原来的位置，'top：-10px;'把它向上移动10px，那么是的。 – Jonathan

设置显示后负边距不起作用：内嵌块

回答

相关问题