Question

我试图弄清楚当内联元素和浮动元素彼此相邻时的行为方式。我有下面的代码，其中内联元素出现在浮动的元素之前，第二种情况是内联元素出现在浮动元素之后和两种情况下。

html代码在两个示例中都是相同的，所以我将把它放在这里：

<body>
    <p class="first">first paragraph</p>
    <p class="second">second pargraph</p>
    <p class="clearBoth"></p>
 </body>

所以这是第一个示例，其中是浮动的内联元素，以及后面的css：

html{
    background:white;
}
p.clearBoth{
    clear:both;
}
body{
    width:400px;
    margin:0 auto;
    background:red;
   }
    p.first{
    display:inline;
    background:yellow;
    color:black;   
    }
   p.second{
   float:left;         
   background:black;
   color:white;
}

and here is the link what this code does

这是第二个示例，其中浮动元素是第一个元素，以及以下css代码：

html{
    background:white;
}
p.clearBoth{
    clear:both;
}
body{
    width:400px;
    margin:0 auto;
    background:red;
   }
    p.first{
    float:left;
    background:yellow;
    color:black;   
    }
   p.second{
   display:inline;         
   background:black;
   color:white;
}

And here is link what it does

在这两种情况下，我都注意到浮动元素将首先在左侧，无论哪个是html文档中的第一个，但我发现这种对齐非常奇怪，因为我通常希望两者都在同一行。

Answer 1

这是因为网络浏览器将margin属性应用于<p>元素的顶部和底部。

例如，Google Chrome应用以下内容：

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;

您需要使用 CSS Reset

重置默认用户代理样式表

作为一个微小的修复，仅用于演示：

* { margin: 0; padding: 0; }
/* Or just:
p { margin: 0; }
*/

UPDATED DEMO #1

<强> UPDATED DEMO #2

浮点数旁边的内联元素

1 个答案: