奇怪的间隙和垂直对齐问题

一个基本的搜索框和按钮, 没有任何样式

    <form action="">
        <input type="search" name="keywords">
        <button>搜索</button>
    </form>

chrome浏览器下, 默认应该是这样的:

经过检查, input和button都没有外边距, 那么之间的空隙哪里来的呢?

其实是由于input和button之间的换行导致的, 换行符被浏览器解析为了一个空格

将换行去掉后

    <form action="">
        <input type="search" name="keywords"><button>搜索</button>
    </form>

间隙消失了

那这里就必须不能换行吗?

并不是, 换行也是字符, 可以通过font-size:0;将其隐藏掉, 也能达到同样效果

需注意的是, font-size是可继承的属性, 可能会影响后代元素中字体的大小, 所以还需要在后代元素中重新设置字体大小, 一般默认字体大小为16px

不过这里并不影响, 因为默认样式的优先级大于所继承样式的优先级

        form {
            font-size: 0;
        }

font-size属性会影响input框的大小! input中的字体设置变大, input框自然也跟着变大

第二个问题就是, input和button其实并不在同一水平线上, button更向下一点点, (不过这里并不明显, 因为默认的尺寸都比较小, 这里也易被忽越了)

为了便于观察, 为form添加一个边框

可以看到input和下边框之间, 其实是有一点点缝隙的.

在按钮button和input中添加一些字母X,(为什么是X? 因为X下对齐的线, 叫做基线)

默认元素垂直对齐方式是 基线对齐, 所以这里两个元素中X下的线, 是对齐的

怎么解决?

重新设置元素垂直对齐方式就可以了, vertical-align 默认值是 baseline (基线对齐)

      /* 加在botton上也是可以的 */
    input {
        vertical-align: bottom;  /* 向下对齐 */
      }

水平上 奇怪的间隙, 考虑考虑是不是由于 换行符 导致

垂直上 奇怪的间隙, 考虑考虑是否由于 基线对齐 导致