How deeply does Tiny CSS Projects cover vertical-align property?

Defines alignment for inline and inline-block elements, then applies middle to a button image without exploring other values.

Vertical-align property

As explained in Tiny CSS Projects

The CSS vertical-align property controls the vertical alignment of an inline or inline-block element relative to surrounding inline content.

The CSS vertical-align property aligns an inline or inline-block element vertically according to the surrounding inline content. Use the value middle when an image needs to sit centrally inside a button. section 8.2.2

Centering an image in a Remove button

A circular destructive button uses reduced padding so it does not dominate the cart table. Applying vertical-align: middle to its image centers the image vertically inside the button. section 8.2.2

Listing 8.6 Remove button

button.destructive {
  border-color: #9d1616;
  color: #9d1616;
  border-radius: 50%;
  padding: 5px;
}
 
button.destructive img {     #1
  vertical-align: middle;    #1
}                            #1
 
button.destructive:hover,
button.destructive:focus {
  outline-color: #9d1616;
}

Inspect the complete destructive-button rule, including the vertical-align declaration and its hover and focus styling. section 8.2.2

How Tiny CSS Projects covers it

liveBook manning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Related concepts

baselineequivalent to · A text baseline is the typographic reference line on which most glyphs rest and relative to which their vertical positions are defined.
digital imageused by · A digital image is visual content encoded as data, typically as a two-dimensional arrangement of pixels or equivalent visual elements.
x-heightuses · X-height is the vertical distance from a typeface’s baseline to the height of its lowercase letters, conventionally represented by the letter x.
pixeluses · A pixel is either a discrete sample carrying visual information at a position in a digital image or a reference unit used to express rendered dimensions.
img elementuses · The HTML img element embeds an image resource in a document.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.