Why the content in the span elements can't be put in the div container?

Question

The content in the p elements can be put in the div container with the following css codes.

    * {
      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>

Now i replace the p elements with span elements.

    * {
      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>

The displayed effect is as following.

All the contents in the span were out of the div container,not the same effect in the p elements,how to make all the contents in the span elements within the div container?

Answer 1

the reason your SPAN elements are being floated outside the div is because SPANs, by default, are displayed as inline elements. if you want to use the SPAN tags, rather than the P tags, and have them remain inside the DIV, simply use the following rule:

div.description span { display:block; }

This should fix the problem, though it might look a little needless to use this rule, rather than using a P tag. But, it's your website and your choice.

Answer 2

The reason it works in the first case and not the second is because <p> tags are display: block by default and <span> tags are display: inline by default. The block paragraph elements display one per line within their parent, and since their parent is floated, they only take up as much width as necessary.

But, with the inline span tags, they display side by side, taking up as much width as they can, causing their parent (the description div) to be wider than the space to the right of the image. So, the description div displays below the image.

To fix this, you can set display: block on the span elements. Like:

div.description span
{
    display: block;
}

Here's a working demo: https://jsfiddle.net/uy8x9z4v/. However, since the <p> tags already have the block display feature you need, I would recommend using them instead of spans, unless you have a very good reason not to.

Answer 3

Some HTML tags have default CSS values. <span>has none, while <p> has the following:

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

So your problem is that <span> does not have display: block;