爲什麼span元素中的內容不能放入div容器中？

Question

p元素中的內容可以用下面的css代碼放在div容器中。

* { 
 
     margin: 0 0 0 0; 
 
     padding: 0 0 0 0 
 
    } 
 
    div.container { 
 
     width: 400px; 
 
     height: 121px; 
 
     border: 1px solid red; 
 
     position: absolute; 
 
     bottom: 0px; 
 
     left: 0px; 
 
     right: 0px; 
 
     top: 0px; 
 
     margin: auto; 
 
    } 
 
    div.box { 
 
     float: left; 
 
    } 
 
    div img { 
 
     margin: 0px; 
 
     padding: 0; 
 
     width: 121px; 
 
     height: 121px; 
 
     float: left; 
 
    } 
 
    div.description { 
 
     float: left; 
 
     border 1px solid red; 
 
     margin: 10px 50px; 
 
    }

<div class="container"> 
 
    <div class="box"> 
 
    <img src="images/set06.jpg" /> 
 
    </div> 
 
    <div class="description"> 
 
    <p>music mane: xxxxxxxx</p> 
 
    <p>author: yyyyyyyy</p> 
 
    <p>publication：20081001</p> 
 
    <p>language：english</p> 
 
    </div> 
 
</div>

現在我替換跨度元件的p元素。

* { 
 
     margin: 0 0 0 0; 
 
     padding: 0 0 0 0 
 
    } 
 
    div.container { 
 
     width: 400px; 
 
     height: 121px; 
 
     border: 1px solid red; 
 
     position: absolute; 
 
     bottom: 0px; 
 
     left: 0px; 
 
     right: 0px; 
 
     top: 0px; 
 
     margin: auto; 
 
    } 
 
    div.box { 
 
     float: left; 
 
    } 
 
    div img { 
 
     margin: 0px; 
 
     padding: 0; 
 
     width: 121px; 
 
     height: 121px; 
 
     float: left; 
 
    } 
 
    div.description { 
 
     float: left; 
 
     border 1px solid red; 
 
     margin: 10px 50px; 
 
    }

<div class="container"> 
 
    <div class="box"> 
 
    <img src="images/set06.jpg" /> 
 
    </div> 
 
    <div class="description"> 
 
    <span>music mane: xxxxxxxx</span> 
 
    <span>author: yyyyyyyy</span> 
 
    <span>publication：20081001</span> 
 
    <span>language：english</span> 
 
    </div> 
 
</div>

顯示的效果是如下。

span中的所有內容都不在div容器中，p元素中的效果不一樣，如何使div容器中的span元素中的所有內容都變成？

Answer 1

它工作在第一種情況的原因，而不是第二個是因爲<p>標籤display: block通過默認和<span>標籤默認爲display: inline。塊段元素在其父代中每行顯示一個元素，並且由於他們的父元素被浮動，所以它們只會根據需要佔用盡可能多的寬度。

但是，使用內聯span標籤，它們並排顯示，佔用儘可能多的寬度，導致它們的父級（描述div）比圖像右側的空間寬。所以，圖像下面會顯示說明div。

要解決這個問題，您可以在span元素上設置display: block。像：

div.description span 
{ 
    display: block; 
} 

這是一個工作演示：https://jsfiddle.net/uy8x9z4v/。但是，由於<p>標籤已具有您需要的塊顯示功能，因此我建議使用它們而不是跨度，除非您有一個非常好的理由不這樣做。

Answer 2

您的SPAN元素浮動在div之外的原因是因爲默認情況下，SPAN顯示爲內聯元素。如果你想使用SPAN標籤，而不是在P標籤，並讓他們留在DIV中，只需使用以下規則：

div.description span { display:block; } 

這應該可以解決這個問題，儘管它可能看起來有點不用使用這個規則，而不是使用P標籤。但是，這是您的網站和您的選擇。

Answer 3

某些HTML標記具有默認CSS值。 <span>現在沒有，而<p>有以下幾點：

p { 
    display: block; 
    margin-top: 1em; 
    margin-bottom: 1em; 
    margin-left: 0; 
    margin-right: 0; 
} 

所以你的問題是，<span>沒有display: block;