canvas底部有空白部分

在项目中需要用到canvas画图完成图表绘制，遇到一个问题canvas底部总是存在一定的间距。

html代码如下：

  <div class="row">
    <select ng-model="$ctrl.selected" class="time-unit text-center" ng-options="x.value as x.text for x in $ctrl.timeUnit">
    </select>
    <div id="time-line-container">
      <canvas id="time-line-convas" width="1300" height="25" style="background: red; display: block;">
        your browser not support canvas, please upgrade your browser.
      </canvas>
    </div>
  </div>

最终显示出的界面如下：

即红色部分为canvas部分，无论如何调整canvas的margin和外层div容器的padding都不能消除空白部分。

Google一番在canvas的父div增加 vertical-align: bottom样式即可解决问题。

修复后的代码如下：

 

  <div class="row">
    <select ng-model="$ctrl.selected" class="time-unit text-center" ng-options="x.value as x.text for x in $ctrl.timeUnit">
    </select>
    <div id="time-line-container" style="vertical-align: bottom;">
      <canvas id="time-line-convas" width="1300" height="25" style="background: red; display: block;">
        your browser not support canvas, please upgrade your browser.
      </canvas>
    </div>
  </div>

修复后刷新如下：