动态创建的<div>将无法正确定位</div>

Question

我正在制作一个使用两个textareas的网络应用，当点击一个按钮时，其中一个textareas会被div替换为使用JavaScript。我试图将div插入到页面中的textarea前身的确切位置，这样用户就不会注意到切换，但由于某种原因，它并不像应该的那样容易。 div的垂直位置似乎根据其中的内容而改变。我觉得它与

有关

display: inline-block;

在我的CSS文件中，但是需要保持两个textareas水平居中而没有固定的宽度。

任何帮助将不胜感激。

可以在我的网站上找到该网络应用：http://lobian.co/code/remove-attributes/。要查看问题，请在左侧textarea输入任意数量的文本，然后单击“删除属性”。有问题的div将替换textarea。

更新 穆萨在下面的回答解决了这个问题。

Answer 1

只需为两个元素提供相同的垂直对齐，例如vertical-align:top

DEMO

Answer 2

试试这个

div#color_change {
    padding: 0;
}

你给了2px填充div（44％宽度），这增加了它的大小。