为何同一行的input[type=color]会干扰文本位置？

这个现象源于块级布局的内联元素对齐规则，以及自定义样式后type="color"输入框的特殊基线表现：

块级容器的默认对齐逻辑 #

当容器是默认的display:block（你的.main就是块级）时，内部的内联/行内块元素会自动按照**基线（baseline）**对齐——基线指的是文本字符的底部对齐线（比如小写字母"x"的底部）。

type="color"输入框的基线特殊性 #

你通过appearance: none移除了type="color"输入框的默认浏览器样式，同时重置了边框、内边距，此时这个输入框作为替换元素，浏览器会将它的基线认定为元素自身的底部边缘，而非普通文本输入框那样和文本基线对齐。

因为输入框设置了height:22px，它的底部基线位置远低于<b>标签中文本的基线，为了满足基线对齐规则，<b>的文本会被强制向下偏移，直到两者基线对齐，这就是你看到的文本下移现象。

两种解决方案的原理 #

• 移除type="color"属性：输入框变为普通文本输入框，它的基线默认与文本基线一致，<b>的文本就能和输入框保持正常对齐，不会偏移。
• 给.main添加display:flex：flex布局完全替换了块级布局的对齐规则，内部元素不再遵循基线对齐，而是按照flex容器的交叉轴对齐逻辑（默认align-items: stretch）排列，文本自然回到正常位置。

代码示例：

<div class="main">
  <b style="border: 1px solid;">text line</b>
  <input type="color" value="#0000ff">
</div>

<style>
.main{
    border: 1px solid red;
    box-sizing: border-box;
}
input{
  height: 22px;
}

input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  padding: 0;
  border-radius: 2px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  margin: 0;
}

</style>

内容的提问来源于stack exchange，提问作者ahuigo