浮動DIV和P元素

雖然使用float屬性兩個div元素彼此相鄰，但兩個段落元素不相同;而'p'元素會產生一個奇怪的結果。浮動DIV和P元素

另外，奇怪的是，當我浮動兩個'div'元素和兩個'p'元素時，結果會更好地對齊。

我的3個代碼示例或許能夠解釋（請注意：在鏈接到我的第三個代碼是在我下面的評論我沒有足夠的信譽分把3個環節）：

代碼1：https://jsfiddle.net/dipeshsukhani/v7r45zeg/

#superhero { 
 
    background-color: yellow; 
 
    float: left; 
 
} 
 

 
#supervillain { 
 
    background-color: pink; 
 
}

<p id="superhero"> 
 
    SUPERHERO 
 
</p> 
 
<p id="supervillain"> 
 
    SUPERVILLAIN 
 
</p>

代碼2：https://jsfiddle.net/dipeshsukhani/51mtncx8/

#hero { 
 
    background-color: lightcoral; 
 
    float: left; 
 
} 
 

 
#villain { 
 
    background-color: lightcyan; 
 
}

<div id="hero"> 
 
    HERO 
 
</div> 
 
<div id="villain"> 
 
    VILLAIN 
 
</div>

代碼3：

#hero { 
 
\t \t background-color: lightcoral; 
 
\t \t float: left; 
 
\t } 
 

 
\t #villain { 
 
\t \t background-color: lightcyan; 
 
\t } 
 
    
 
    #superhero { 
 
\t \t background-color: yellow; 
 
\t \t float: left; 
 
\t } 
 

 
\t #supervillain { 
 
\t \t background-color: pink; 
 
\t }

<div id="hero"> 
 
\t HERO 
 
</div> 
 
<div id="villain"> 
 
\t VILLAIN 
 
</div> 
 
<p id="superhero"> 
 
\t SUPERHERO 
 
</p> 
 
<p id="supervillain"> 
 
\t SUPERVILLAIN 
 
</p>

對於爲什麼只DIV，只有P和 '在一個單一的代碼DIV和P' 這樣不同的結果？

來源

2017-03-03 Dipesh Kumar Sukhani

https://jsfiddle.net/dipeshsukhani/86j15kku/3/ –

所以......問題是什麼？ –

爲什麼div只有這樣不同的結果，只有p和'單個代碼中的div和p'？ –

你的兩個例子在浮動方面的工作方式都是相似的。什麼讓你感到困惑，並且讓你認爲p版本不起作用，p在瀏覽器中應用了默認的頂部/底部邊緣（頂層爲Webkit中的-webkit-margin-before: 1em;）樣式。這些邊際使第一（浮動）段看起來像沒有浮動，雖然它是。

很容易測試通過重置保證金0：

#superhero { 
 
    background-color: yellow; 
 
    float: left; 
 
    margin: 0; 
 
} 
 

 
#supervillain { 
 
    background-color: pink; 
 
}

<p id="superhero"> 
 
    SUPERHERO 
 
</p> 
 
<p id="supervillain"> 
 
    SUPERVILLAIN 
 
</p>

來源

2017-03-03 09:45:29 dfsq

浮動DIV和P元素

回答

相關問題