CODEWITHSUNDEEP
htmlcsscss-float
byronyasgur
byronyasgur

Reputation: 4747

Why does an empty span tag in a floated parent render on a new line?

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

Upvotes: 1

Views: 863

Answers (2)

HaukurHaf
HaukurHaf

Reputation: 13816

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 v.s FF/IE, which one is right :-) ?

Upvotes: 4

Creaven
Creaven

Reputation: 319

Spans are designed to be embedded or wrapped i.e 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

Upvotes: 2

Related Questions