css的vertical-align属性

关于vertical-align，翻译过来就是，垂直对齐。该属性包含的属性如下所示：

属性名

描述

长度	通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'
百分值 – %	通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline'
baseline	默认。元素的基线与父元素的基线对齐。
sub	降低元素的基线到父元素合适的下标位置。
super	升高元素的基线到父元素合适的上标位置。
top	把对齐的子元素的顶端与line box顶端对齐。
text-top	把元素的顶端与父元素内容区域的顶端对齐。
middle	元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。
bottom	把对齐的子元素的底端与line box底端对齐。
text-bottom	把元素的底端与父元素内容区域的底端对齐。
inherit	采用父元素相关属性的相同的指定值。

在我用的时候，是在我使用表格的行合并以后，得到的一个区域，想要在这个区域中输入内容，它会默认出现在区域的中间，而我想要使内容出现在本区域的最上方，如下图所示：

没有设置vertical-align值前：

设置#sidebar{

border-left: 1pt dotted #0033FF;
text-align: left;
padding: 0;
vertical-align:top;
}以后结果：

至于其他的属性具体是什么效果，在这里提供一个大神设计的测试网页面板，可以进去看看，秒懂。

http://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html