如何做一个vertical-align:bottom但是10px

Question

我希望有两个内联块,第二个是vertical-align:bottom但是高达10个像素.我不确定我会怎么做.我在想这样的事情但是如何将test2类移动10像素呢？

.test1{
  display:inline-block;
  border: 1px solid red;
  min-height: 50px;
}

.test2{
  display:inline-block;
  border: 1px solid blue;
  vertical-align:bottom;
}

<div class='outer'>
  <div class='test1'>
    here is some info
  </div>
  <div class='test2'>
    here is more info
</div>
</div>

Answer 1

如果我正确理解你的问题,这就是答案:只需添加 margin-bottom: 10px

.test1{
  display:inline-block;
  border: 1px solid red;
  min-height: 50px;
}

.test2{
  display:inline-block;
  border: 1px solid blue;
  vertical-align:bottom;
  margin-bottom: 10px;
}

<div class='outer'>
  <div class='test1'>
    here is some info
  </div>
  <div class='test2'>
    here is more info
</div>
</div>