干掉行内元素(inline-block)间的空格

---

每次写搜索框的时候都特别烦

    <input type="text"/>
    <button value="submit">click</button>

如上代码,浏览器里实现两个框之间总有一段空白, 两个元素的margin全调0, padding全调0, 无效,狠下心来用第二个元素的margin-left的负值把空格拉没,但是换个电脑,换个浏览器又挂了,只能算是治标不治本.

---

分析:
注意,这里的<input>, <button> 是行内元素,这意味着就和一个字符一样,而不管两个字符相距多远,对于浏览器来说只会解析为一个空格, 比如上述代码,换了一行,也算是一个空格,那一段空白就是这么来的.

---

那么,解决方案不就来了嘛, 最简单的方案,如下:

    <input type="text"/><button value="submit">click</button>

OK!

---

• 在css_tricks上给出了很多技巧,
  比如

    <input type="text"/
    ><button value="submit">click</button>

再比如

    <input type="text"/><!--
    --><button value="submit">click</button

其实都是上面的思想,就是把两个行内元素之间的空格去掉

---

千万注意!!!!!!! 一般编辑器美化代码的插件都会把两者分行, css_tricks上的方法也会挂, 所以美化后注意再调整一下,千万记住!!!!

---

第二种方法: 为第一个(input)的css属性添加float:left也可以解决

---

另:

那两个垂直不对齐怎么办,虽然两者高度相同

解决方案:

• 给第一个input的css加一个 vertical-align: middle