css 元素对齐的问题

谢谢你点开问题。

1. 问题描述：
   在没有设置font-siz和font-family属性之前，两元素是对齐的，但设置之后出现了不对齐的问题。

如下图所示：
一开始是这样的：

设置font-size和font-family两个属性或者其中一个属性都会造成不对齐的情况。

1. html如下：

<div id="table1">
        <form>
            <input type="text" class="search" maxlength="32" size="108" />
            <input type="submit" class="button" value="百度一下" />
        </form>
    </div>

css如下：

    *{
        padding: 0px;
        margin: 0px;
    }
    .search{
        line-height: 32px;
    }
    .button{
        display: inline-block;
        height: 36px;
        width: 82px;
        background-color: #46A3FF;
        border-style: none;
        margin-left: -8px;
        font-size: 20px;
        font-family: 微软雅黑;
        padding: 0px;
                    }

刚开始学习，有点困惑，第一我对button设置了width和height属性，padding也是0px，不知道为什么会出现不对齐的情况？

---

因為 line-height 將 line-height 設的跟高一樣 32px 應該就能解決您的問題。

解釋的話請參閱與這篇

---

vertical-align: top | bottom | sub