css Question posted in
Some basic documentation can be found here.

CSS vertical-align conflicts

I would like to fully understand what happens when there are conflicts in baseline positioning and there are different vertical-align in adjacent inline elements. I’ve tried testing this on more complex scenarios but in a nutshell the baseline moves up or down based on what element comes first, and I can’t find an answer in the documentation to how these conflicts are resolved.

JSFiddle Demo

.container {
  color: white;
  background-color: black;
  width: 160px;
  border: 4px solid black;
}

.foo,
.bar {
  display: inline-block;
  width: 60px;
  height: 60px;
}

.foo {
  background-color: orange;
  vertical-align: top;
}

.bar {
  background-color: yellowgreen;
  vertical-align: bottom;
}
<div class="container">
  A
  <!-- swap foo with bar -->
  <div class="foo">
    B
  </div>
  <div class="bar">
    C
  </div>
</div>
Tags:

2

Answers


  1. 0

    Note this has to do with the display: inline-block; lots of details here:https://stackoverflow.com/a/35531553/125981 but you can just change to table-cell also.

    .container {
  color: white;
  background-color: black;
  width: 160px;
  border: 4px solid black;
}

.foo,
.bar {
  display: table-cell;
  width: 60px;
  height: 60px;
}

.foo {
  background-color: orange;
  vertical-align: top;
}

.bar {
  background-color: yellowgreen;
  vertical-align: bottom;
}
    <div class="container">
  A
  <!-- swap foo with bar -->
  <div class="foo">
    B
  </div>
  <div class="bar">
    C
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Actually there is no clear answer. From the Specification:

    In case they are aligned ‘top’ or ‘bottom’, they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.2 does not define the position of the line box’s baseline.

    As you can read, we can have multiple solutions thus multiple baseline and the specification doesn’t define which one to use.

    It’s the case of your example and if you test your code on different browsers you won’t get the same baseline.

    Chrome choose top

    enter image description here

    Firefox choose bottom

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search