5

Sorry to beat a dead horse, but I cannot for the life of me understand why the below does not work.

  • Set line-height: 50px
  • Set vertical-align: top
  • To my understanding, this should make the line-box 50px tall, and then vertical-align should, according to MDN, be able to move the inline element around inside it.

Specifically:

The following values vertically align the element relative to the entire line:

bottom

Aligns the bottom of the element and its descendants with the bottom of the entire line.

I tried both this:

<span style="line-height: 50px; border: 1px solid red; vertical-align: bottom">Some text</span>

And this:

<div style="line-height: 50px; border: 1px solid yellow">
   <span style="border: 1px solid red; vertical-align: bottom">Some text</span>
</div>

It is the last version above that I would expect to position the span at the bottom. It says the line-box should be 50px, then vertical-align is used on the child span.

PS: Please don't just say "use flexbox" or similar. I would like to understand the inner workings / conceptually why the above did not position the span at the bottom of the line.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Magnus
  • 6,791
  • 8
  • 53
  • 84
  • From https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align "Note that vertical-align only applies to inline and table-cell elements: you can't use it to vertically align block-level elements." – Dan May 06 '18 at 14:17
  • Guys, please read the post / know how it works, before replying. You can try to surround the span in another span if you like, and place the line-height on that, or place the line-height on the span itself, it makes no difference. @Dan I am not using vertical-align on a block element, I am using it on a `span` where the linebox is taller than the element itself. – Magnus May 06 '18 at 14:19
  • http://phrogz.net/css/vertical-align/index.html – Alex M May 06 '18 at 14:24
  • @AlexM I know the contents there from before, unfortunately it does not address the problem. In the end, vertical-align should align an inline element within its linebox, when the linebox is taller than the element itself. At least that is my understanding. – Magnus May 06 '18 at 14:30
  • 1
    @dippas, can you explain us how the question is a duplicate? – Temani Afif May 06 '18 at 14:42
  • @dippas This is not a duplicate of the post you marked. In fact, that question confuses the problem here, because the OP wants to know how to center something vertically. If that is the goal, you simply have to set the line-height to taller than the contents. No need for vertical align at all. My question was why vertical-align bottom/top did not work. – Magnus May 06 '18 at 14:43
  • 1
    @dippas it doesn't have to be a block element. vertical-align applies to inline elements and the OP is aware about how to align vertically, but there is a confusion of line-height, that's why we don't have the desired effect. It's not about "how to align" but "why alignment is not working as expected" – Temani Afif May 06 '18 at 14:47

3 Answers3

6

Everything you said is right but you simply forget something which is inheritance. The span element is having the same line-height defined on the div that's why bottom has no effect in your case.

enter image description here

Reset the value to initial and it will work.

<div style="line-height: 50px; border: 1px solid yellow">
<span style="border: 1px solid red; vertical-align: bottom;line-height:initial;">Some text</span>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Amazing, spot on. Thank you. I will try a few things and see if any other questions come up. Otherwise will mark this as the solution. That also explains why it works when there are two elements on the line (forces the linebox bigger than the smallest element). – Magnus May 06 '18 at 14:44
  • @Magnus try to add `line-height:0` to the span and increase it to see what happen ;) then you will understand eveyrthing – Temani Afif May 06 '18 at 14:44
  • In this case, the div-element will contain a line box with line-height of 50px. Then you add a span-element with a line-height that is less than 50px. The span-element can therefore be vertically aligned relative the rest of the line box. – haugsand May 06 '18 at 14:51
0

A line box can have multiple elements with different line-heights. For example:

<p>
  <span class="segment1">Segment 1</span>
  <span class="segment2">Segment 2</span>
  <span class="segment3">Segment 3</span>
</p>

By default, all the elements in the paragraph has the same line-height.

But if let the span elements have a smaller line-height than the paragraph, I can adjust them relative to each other with vertical-align.

p {
  background-color: black;
  color: white;
  line-height: 40px;
}

.segment1 {
  background-color: red;
  line-height: 20px;
  vertical-align: top;
}

.segment2 {
  background-color: green;
  line-height: 20px;
  vertical-align: baseline
}

.segment3 {
  background-color: blue;
  line-height: 20px;
  vertical-align: bottom;
}

Look at this codepen: https://codepen.io/anon/pen/pVWQQy

The property vertical-align can be used to vertically align an inline element's box inside its containing line box.

In your first example, you are trying to vertically align the text inside the elements own line box. This is not possible. If you increase the line-height, an equal amount of space will be added above and below the baseline.

In your second example, you are trying to vertically align an inline element (<span>) inside a block element (<div>), not a line box.

haugsand
  • 400
  • 1
  • 5
  • You can set the line-height on the span itself if you want, it makes no difference (see example one). It works on an element, but not on other inline elements (like the span). – Magnus May 06 '18 at 14:14
  • `Vertical-align` positions the element relative to other elements on the same line. Look at this example: https://codepen.io/anon/pen/qYPQoV. If you increase the line-height, an equal amount of space will always be added above and under the text. – haugsand May 06 '18 at 14:22
-1

Use height instead of line-height. Using the latter is to position the child in the center vertically.

<div style="height: 50px; border: 1px solid blue; vertical-align: top;">
   <span style="border: 1px solid red;">Some text</span>
</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52