Herrsocke Herrsocke - 1 month ago 7
CSS Question

Behaviour of vertical align

I got this code, and i am wondering why the

vertical-align: bottom;
also affects the
.floating-box
elemnets even it was only set for
.floating-box2


also, where can i read about this behaviour? I couldnt find anything about it so far.

Definition of
vertical-align: top


"Align the top of the element and its descendants with the top of the entire line."
So it says nothing about the inclusion of previous classes.



<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;


}

.floating-box2 {
display: inline-block;
width: 150px;
height: 195px;
margin: 10px;
border: 3px solid #73AD21;
vertical-align: bottom;
}

.after-box {
border: 3px solid red;
}
</style>
</head>
<body>

<h2>The New Way - using inline-block</h2>

<div class="floating-box">Floating box</div>
<div class="floating-box2">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box2">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box2">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>

<div class="after-box">Another box, after the floating boxes...</div>

</body>
</html>





greets

Answer

This wiki page gives some information on the vertical-align property:

https://www.w3.org/wiki/CSS/Properties/vertical-align

Here is a link to the CSS2 spec. Section 10.8 covers vertical-align:

https://www.w3.org/TR/CSS2/visudet.html

It looks to me like your HTML is displaying as it should. The vertical-align property assigned to an inline element controls that element's alignment, compared to the "baseline" of the line box that element is in.

The default value is "baseline." "Baseline" refers to the line that text appears to be sitting on. "Bottom" refers to the bottom of the box that contains the text (including descenders). So for your inline-blocks, baseline will be the same as bottom. So all of your inline boxes (of class floating-box and floating-box2) have the same vertical alignment (either through your CSS or through the default values). So all the inline boxes that appear on one line will have their bottom edges aligned.

Text within each inline-block is displaying as it should: Inline-blocks fill from top to bottom (just like any other block-level element). The vertical-align property does not control the alignment of text within the element that has the property; the vertical-align property controls the alignment of the element with the property, relative to its "container." The container is the "line box," which is is a CSS construct used to group all of the elements that the browser has placed on one line.

This article from Smashing Magazine may help: https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/