Why is vertical-align applied to the other element?

Question

I wrote CSS with vertical-align applied to one of these boxes.

Then, vertical-align, which is specified for only one side, is applied to the other element.

.a {
  height: 75px;
  width: 75px;
  background-color: red;
}

.a,
.b {
  display: inline-block;
}

.a {
  vertical-align: middle; /* vertical-align applied to .a also affects .b */
}

<div class="a"></div>
<div class="b">
  <p>texttttt</p>
</div>

Why does setting the vertical-align on one side affect the other side?

related: https://stackoverflow.com/a/52635716/8620333 / https://stackoverflow.com/a/54379729/8620333 — Temani Afif, May 18 '19 at 13:01
............. ^ The first one is almost a duplicate if not an exact duplicate — Temani Afif, May 18 '19 at 13:08

score 0 · Answer 1 · answered May 18 '19 at 13:33

vertical align for inline elements works for aligning inline elements based on each other as your example says a will be centered in the middle with the element b not based to their parents height.

if you want to align b vertically based on a position you have to add a vertical align property to b

.b{
  vertical-align: top;

}

for a side note to see a proper results and understand it better you should reset the default margins on the p tag

p{
  margin:0;
}

Why is vertical-align applied to the other element?

1 Answers1