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