如何向上移动.bookmark元素使其与.edge元素处于同一高度？

两个设置为inline-block的div出现上下错位，核心原因是行内块元素默认按基线对齐，两个元素高度不同时就会出现偏移。改动最小的实现方式是给两个元素的公共样式加上vertical-align: top，修改后的CSS代码如下：

.bookmark {
  width: 0;
  height: 350px;
  border: 35px solid rgb(236, 236, 236);
  border-bottom: 30px solid transparent;
  opacity: .9;
  position: relative;
  left: 50px;
}

.edge {
  width: 5px;
  height: 500px;
  border-left-style: solid;
}

.bookmark,
.edge {
  display: inline-block;
  vertical-align: top; /* 新增这一行即可 */
}

• vertical-align: top的作用是让行内块元素对齐所在行的顶部，两个元素顶部齐平自然就处于同一高度，如果你需要底部对齐，把属性值换成bottom即可。
• 如果你后续布局改动多，也可以给两个元素的外层父容器设置display: flex，flex布局默认的对齐规则也能实现两个元素顶部齐平的效果，不过对于当前场景，加一行vertical-align是成本最低的方案。

内容的提问来源于stack exchange，提问作者timemachine11