图标与文字一行对不齐的问题

一开始总是把文本和图片对不齐，那时候采用的方式是：
针对图一：<img src="url" /> 最新入库
针对图二： <input type="text" /> <img src="url" />
这样做真是做到花儿也谢了都对不齐，图片总是会靠上，无论怎么设置padding和margin都没用，这个问题一直困扰了很久。


今天浏览网页的时候突然想到，那么多板块头部都是一个图标跟几个文字，并且很多图标都是一样的，那能不能把这种样式用css做出来呢，既可以复用，又可以减少页面大小。我突然想到用样式中的background试一下，写法如下：

.tHeader
{
background-image:url(../arrow_2.gif); //图标的url
background-position:left top; //图标未知，对齐的关键点之一，如果设置left center，那么图标相对于文字会稍微靠下
background-repeat:no-repeat; //背景重复方式:不重复，对齐的关键点之二
padding-left:20px; //应用此样式后文本居左的位置，稍大于图标的宽度，这样图和文字之间会由简单空隙
font-size:14px;
}

然后这样使用：<span class="tHeader">最新入库</span>

这样就可以对得非常齐了，高兴中：）

而输入框带图片的做法也类似，但是有一点不同，应该写成：
<input type="text" /> <input type="submit" class="tButton" />
type="submit"那个按钮就显示图片了，如果需要图片上带文字，那么再加上value属性即可。

而.tButton这样写：

.tButton
{
background-image:transparent url(../arrow_2.gif) no-repeat;
width: 80px; //图片的宽度
height:90px; //图片的高度
border:none; //隐藏按钮的边框，因为按钮默认边框会影响背景的样子
}


办法二：简单的

直接改变图片的样式 style=" margin-bottom:-4px;" 或者自己写个CSS 样式 搞定 不信可以试试