为什么浮动父级中的空span标签会在新行上呈现？

Question

I am trying to find out why an empty span tag would render on a new line when it's a child of a floated parent. I'm sure it's obvious but I can't find the answer.

EDIT: this is not something I'm trying to fix ... more a question for study, so I'm not really looking for a workaround as such.

EDIT: as pointed out this below this is seemingly specific to chrome

here is my code

HTML

<!-- Example 1  -->
<section>
  <div class = "parent">
    <span>contents</span>
    <span>contents</span>
  </div>
</section>

<!-- Example 2 -->
<section>
  <div class = "parent">
    <span>contents</span>
    <span>contents</span>
    <!-- empty span renders on new line -->
    <span class = "empty"></span> 
  </div>
</section>

CSS

.parent{
  float:right;
  background: #666;
  margin-bottom:10px;
}

.parent span {
  font-size: 40px;
  background: pink;
  margin-right: 10px;
}
section {
  clear:both;
}

See CodePen http://codepen.io/anon/pen/ZYGWMR

Answer 1

The margin-right:10px; seems to be causing this behaviour, and only in Chrome.

FF and IE both render the span in-line.

Adding:

.empty { display:inline-block; }

seems to make Chrome behave in the same way as FF and IE.

IMHO , this appears to be a bug in Chrome. Perhaps someone can shed some light on that .... Chrome vs FF/IE, which one is right :-) ?

Answer 2

Spans are designed to be embedded or wrapped ie with a <p> tag. The span will be treated like a paragraph. I think you could add span : inline block to get them to render inline