为什么我的textarea比它的邻居更高？ [英] Why is my textarea higher up than its neighbor?

问题描述

图片：

  .left {border：1px solid red;} textarea {border：1px solid blue;} parent {border：1px solid green;}  

 < div class ='parent'> < span class ='left'> < span>一个< / span> < span>两个< / span> < / span> < textarea>< / textarea>< / div>  

...你会看到他们完全对齐。 span 和 textarea 都为下传者提供空间。

您添加的边框会导致未对齐的出现，因为 textarea border包装一个清晰划分的框，但不包括下降空间，但 span 边框包装文本空间。

在解决方案方面，这里有两个选项：

1. 向 textarea 规则添加 vertical-align：bottom li>
   
2. 向 textarea 规则添加 display：block 。

更多信息：

• 图片代码下方的神秘空白

Picture:

.left {
  border: 1px solid red;
}
textarea {
  border: 1px solid blue;
}
.parent {
  border: 1px solid green;
}

<div class='parent'>
    <span class='left'>
        <span>one</span>
        <span>two</span>
     </span>
     <textarea></textarea>
</div>

Codepen

解决方案

Why is my textarea higher up than its neighbor?

It's not.

Let me explain.

First, a bit of background:

Your span and textarea elements are (by default) inline elements.

Browsers normally provide a little bit of whitespace underneath inline elements for descenders.

To understand descenders...

Look at this line of text. Notice there are no letters that breach the baseline.

Now look at the following sentence:

By just crossing the bridge he probably got away.

Note the letters "y", "j", "p" and "g". These letters breach the baseline and are known in typography as "descenders".

The gap you're seeing is not margin or padding, but simply the browser providing room to accommodate these lowercase letters. In short, this is called baseline alignment.

So why, somebody might ask, does the browser provide this space for textarea, img, input and other inline elements, that don't need space for descenders?

Because the browser adjusts for the possibility that you may have text before or after one of those elements on the same line.

Now, to your image and code...

On first glance it clearly appears that the textarea is higher up than the span element. But if you take a closer look...

...you'll see they are perfectly aligned. Both span and textarea are providing space for descenders.

The borders you've added contribute to the appearance of misalignment because the textarea border wraps a clearly delineated box while excluding descender space, but the span border wraps the text and the descender space. If you remove the red border the misalignment is less pronounced.

In terms of a solution, here are two options:

1. Add vertical-align: bottom to the textarea rule, OR
2. Add display: block to the textarea rule.

More info:

• Mystery white space underneath image tag

这篇关于为什么我的textarea比它的邻居更高？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！