CODEWITHSUNDEEP
cssvertical-alignment
Daud
Daud

Reputation: 7877

What's the meaning of "parent inline element"?

With respect to vertical-align, W3C spec says:

The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.

What's the meaning of parent inline element here? Is it the first inline element inside a container? If yes, why is it called "parent"?

Upvotes: 1

Views: 97

Answers (1)

Alohci
Alohci

Reputation: 82976

Best explained with an example, I think.

.bar {
  vertical-align:-20px;
}
.baz, .qux {
  vertical-align: text-top;
  line-height:30px;
}
  <div>foo
    <span class="bar">bar
      <span class="baz">baz</span>
    </span>
    <span class="qux">qux</span>
  </div>

All the spans and text content are part of a single line box. The div establishes the inline formatting context, the line box and its strut.

The "foo" text sits on the baseline with respect to the strut's baseline. The .bar span is offset with respect to the strut's baseline by 20px. The .baz and .qux spans have the same styling, where the top of their upper half leading is aligned with the top of content area of their "parent". But you can see that they are not aligned with one another.

That's because the .qux span is aligned with respect to the strut, but the .baz is aligned with respect to its parent inline element, that is, the .bar span element.

Upvotes: 4

Related Questions