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

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

1
2
3
4
<form action="">
    <input type="search" name="keywords">
    <button>搜索</button>
</form>

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

image-20230324095001413

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

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

将换行去掉后

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

间隙消失了

image-20230324095339648

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

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

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

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

1
2
3
form {
    font-size: 0;
}

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

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

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

image-20230324100959854

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

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

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

image-20230324101307559

怎么解决?

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

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

image-20230324102039967

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

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

还有种解决方案就是 设置flex布局

flex默认一行的对齐方式 不再是基线对齐

image-20230326095219868

当然也可以调整到之前的对齐方式

image-20230326095326652