HTML样式排版

记录一些在开发过程中，让界面排版稍微美观的样式风格

input和img标签元素同行水平对齐

在输入验证码时，左边的文本框和右边的img标签控件，如果不设置好对齐的话，就会很难看，如下图(丑爆了撒~)

解决方法：只需要分别对input和img中添加同一属性样式style(vertical-align: middle)，效果很明显好很多了

验证码:<input type="text" name="randomCode" size="5" maxlength="5" style="vertical-align: middle"/>
<img src="/randomCode" id="randomCodeImg" title="看不清，换一张" style="cursor: pointer; vertical-align: middle"/><br>                                           

在table表格中，使input控件填充满整个td列

<td><input style="width: 100%; height: 100%"></td>

也可以在head区域加上统一的风格样式，对当前页面的整个input控件进行统一样式管理：

<%--统一指定空间的风格--%>
<style type="text/css">
    input {width: 100%}
    input {height: 100%}
</style>

边距控制(padding和margin)

1. 以input控件为例，margin指的是自身边框距离另一个容器边框的距离，可以把整个html页面看做一个大的容器，即外部距离；(margin还有其他的样式，比如top,bottom等)

<input type="submit" value="登录" style="background-color: cyan; margin-left: 100px;"><br>

2. padding则指的是自身边框到自身内部另一个容器边框之间的距离，可以把input内部的文本看做是一个容器，即内部距离；

<input type="submit" value="登录" style="background-color: cyan; padding-left: 100px"><br>

待补充…