What's the Deal with Vertical-Align: Baseline

Why does vertical-align: text-top make element go down?

^{Ref: https://www.w3.org/TR/CSS2/visudet.html#line-height}

To understand this you need to first consider the definition of text-top:

The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.
In the following definitions, for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side, see above).

Then

text-top
Align the top of the box with the top of the parent's content area

So we need to identify the top of the box and the top of the parent's content area

If we add some decorations, we can easily identify them

body {
  font-family: sans-serif;
  font-size: 30px;
}

p {
  background: yellow;
  line-height: 50px;
  background:
   linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
   yellow;
}

p span {
  background:green;
}

.three {
  vertical-align: text-top;
  background:red;
}
  

.block {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: pink;
  border: 2px solid black;
  vertical-align: text-top;
}

<div>
  <p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>

Vertical-align not working as expected

I highly recommend reading this vertical-align article to gain in-depth understanding of the property.

How to understand the difference between vertical-align: -0.125em and vertical-align: middle?

vertical-align:middle means

Aligns the middle of the element with the baseline plus half the x-height of the parent

So you need to find the middle of your element, the baseline and half the x-height (defined by the ex unit).

Here is an example:

.box {

  font-size:50px;

  background:

    linear-gradient(green,green) 0 46px/100% 2px no-repeat;

}

.box > span {

  display:inline-block;

  width:30px;

  height:30px;

  background:

    linear-gradient(black,black) center/100% 2px no-repeat,

    linear-gradient(red,red) 0 calc(50% + 0.5ex)/100% 1px no-repeat,

    yellow;

  vertical-align:middle;

}

<div class="box">

Some text j <span></span>

</div>

Table cell vertical-alignment difference between baseline and top

Is there any case where vertical-align:baseline differs from
vertical-align:top ? If so could someone post an example illustrating
that?

Sure.

table, td, th {
    border: 1px solid black;
}

td.top {
    height: 50px;
    vertical-align: top;
}

td.baseline {
    height: 50px;
    vertical-align: baseline;
}

td:first-child:first-letter {
    font-size: 3em;
}

<!DOCTYPE html>
<body>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td class="top">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
    <td class="top">Griffin</td>
    <td class="top">$100</td>
  </tr>
  <tr>
    <td class="baseline">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
    <td class="baseline">Griffin</td>
    <td class="baseline">$150</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
</tr>
</table>

</body>

What's the Deal with Vertical-Align: Baseline

Why does vertical-align: text-top make element go down?

Vertical-align not working as expected

How to understand the difference between vertical-align: -0.125em and vertical-align: middle?

Table cell vertical-alignment difference between baseline and top

Related Topics

Leave a reply