Html 为什么我的文本区比它的邻居高？

图片：

。左{
边框：1px纯红；
}
文本区{
边框：1px纯蓝色；
}
.家长{
边框：1px纯绿色；
}

一
二

亚当

如果将以下内容添加到现有css中，您应该会得到所需的结果

.left{
    display:inline-block;
    vertical-align: text-bottom;
}

textarea{
    margin:0px;
    vertical-align: text-bottom;
}

---

您可以在以下url中看到一个工作示例：

如果您有两个span元素，则high将是相同的。跨度有显示：内联；默认情况下

<span class="left">
    <span>one</span>
    <span>two</span>
  </span>
<span class="right">
    <span>one</span>
    <span>two</span>
 </span>

我的解决方案：

.parent {
  border: 1px solid green;
  display: flex;
}

为什么我的文本区比它的邻居高

不是

让我解释一下

首先，介绍一下背景：

默认情况下，

span

和

textarea

元素为

浏览器通常在内联元素下为子代提供一点空白

要了解后裔

看这行文字。请注意，没有违反基线的字母

现在看下面这句话：

他可能只是过桥就逃走了

注意字母“y”、“j”、“p”和“g”。这些字母违反了标准，在排版中称为“”

[

资料来源：

你看到的空白不是边距或填充，只是浏览器提供了容纳这些小写字母的空间

大多数字母“所在”的线，其下延伸的线

[

资料来源：

那么，有人可能会问，为什么浏览器会为

textarea

、

img

、

input

和其他不需要下行空间的内联元素提供这个空间呢

因为浏览器会根据可能在同一行中的某个元素之前或之后有文本进行调整

现在，为您的图像和代码…

乍一看，

textarea

明显高于

span

元素

…您将看到它们完全对齐。

span

和

textarea

都为下行者提供了空间

添加的边框会导致出现不对齐，因为

textarea

边框会包裹一个轮廓清晰的框，同时不包括下行空间，但

span

边框会包裹文本和下行空间。如果删除红色边框，则不对齐的程度较低

就解决方案而言，有两种选择：

将

vertical align:bottom

添加到

textarea

规则，或

将

display:block

添加到

textarea

规则中

---

1） 这是可行的，但唯一必要的更改是

textarea{vertical align:text bottom；}

。其余的都是无关的。特别是

textarea

的默认边距是

0px

。2）我认为完整的答案可以解决“为什么”，而不仅仅是“修复”.Ie.用户1843159在关于基线的评论中所说的。@AdamZerner在我看来，Firefox上需要

边距：0

，以便对齐两个边框，但在Chrome中不需要。@AdamZerner每个浏览器都有自己的默认元素样式，对于不同的HTML元素，这些样式并不总是相同的。就像用户“Zimmi”说您可能只需要特定浏览器的一些样式。这就是为什么建议您在大多数浏览器中使用类似的基本样式…天哪，这是我读过的最好答案…但是这里有一个问题..如果您有div..并且文本是“新的”…没有下降器…但是，你可以清楚地看到下降器在空间上的差异…有没有一种“收缩包装”的方法文本。顺便说一句，这是一个只有文本的div…不是一个内部跨度或任何东西。@carinlyncin，尝试使用

行高
属性…@Michael\u B我试过了，但底部空间仍然有一点不同。@carinlyncin，发布一个新问题，包含所有细节。@Michael\u B在这里你可以看到一张图片。注意间距是底部稍大一点
.parent {
  border: 1px solid green;
  display: flex;
}