-3

Please refer - https://jsfiddle.net/59a15a9d/

span {
  height: 200px;
  width:200px;
  background: red;
  display: inline-block;
  border: 2px solid green;
  margin: 4px;
  /*float: left*/ /*Second uncomment this*/
}
<span>hello</span>
<span>hello
<!-- <p>asd</p> --> <!-- first uncomment this -->
</span>

I have 2 span elements vertically aligned with "inline-block" CSS. Now in the JSFiddle follow the comments. I have a few questions:

  1. When you remove the first comment, you add a <p> element inside the 2nd span and then the 1st span automatically is misaligned. Why?

  2. Vertical-align property will fix it. How?

  3. When you remove the second comment, instead of a vertical align it just floats <span> left and again they are aligned correctly. What magic did float have on the spans?

Not related to above, one more quick question.

When position absolute/fixed is added to a span element, why does it become a block element?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
anand patil
  • 507
  • 1
  • 9
  • 26
  • You should not that you can't put a `p` tag inside a span...it's invalid HTML. – Paulie_D Aug 13 '16 at 17:35
  • If you don't understand basic HTML structure and CSS layout this is not the place to come for tutorials. – Paulie_D Aug 13 '16 at 17:42
  • 1
    We're all moderators on SO. Please review [**How to ask**](http://stackoverflow.com/help/how-to-ask) questions on Stack Overflow and what types of questions [**can be asked**](http://stackoverflow.com/help/on-topic) and what types [**should be avoided.**](http://stackoverflow.com/help/dont-ask) – Paulie_D Aug 13 '16 at 17:45

2 Answers2

0

Not related to above, one more quick question. When position absolute/fixed is added to span element, why does it become a block element?

The browser think that it doesn't need any relative measurement again as it uses absolute/fixed position, so all surroundings item will be ignored.

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Kekesed
  • 31
  • 7
  • If you have a new question, please ask it by clicking the [Ask Question](http://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/low-quality-posts/13329826) – Murray Foxcroft Aug 13 '16 at 19:02
  • 1
    @MurrayFoxcroft - This is not a new question, Kekesed was quoting the last question in the post. This answer only answers that part but it is not a new question. – BSMP Aug 13 '16 at 21:54
  • yup, i was quoting a question from his. Thank you for edit, Nisse hhehehe – Kekesed Aug 15 '16 at 15:29
0

When you remove the first comment, you add a <p> element inside the 2nd span and then the 1st span automatically is misaligned. Why?

Paulie_D's comment is right. From the W3C

Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements...Generally, block-level elements begin on new lines, inline elements do not.

When you add a paragraph element, it's creating a new line. Note that if you remove the CSS making the spans an inline-block (the inline-block style and the float), the paragraph is placed after the span tag on a new line, not inside of it.

Vertical-align property will fix it. How?

It doesn't, at least not for all values for vertical-align.

W3C Wiki Page for Vertical-Align

The values top, bottom, text-top, and text-bottom "fix" it. But the values baseline, super, sub, inherit, length, and percentage values do not. I don't think you can expect normal behavior of CSS on invalid HTML.

What magic did float have on the spans?

W3C Wiki Page for Float Property:

The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top.

The float fixes things by making the spans block-level elements, which are allowed to contain other block level elements.

BSMP
  • 4,596
  • 8
  • 33
  • 44