Javascript 当选择选项更改时，div将更改其边距

$（'#seltags'）。更改（函数（）{
var obj=$（'#'+$（this.val（））；
$（'.txtags'）.hide（）；
obj.show（）；
});
.seltags{
显示：块；
填充：1px7px；
宽度：100%；
}
.txtags{
显示：块；
宽度：100%；
填充：5px9px；
大纲：无；
边框：1px实心#999；
边界半径：9px；
调整大小：无；
溢出y：滚动；
边缘顶端：13px；
文本转换：大写；
}
塔格西姆先生{
显示：无；
}
D.迪沃顿{
高度：14px；
背景：金；
}

标签文章
标记图像
出现边距是因为当选择第二个选项时，
#tagsimg
元素获得
显示：内联块
内联样式。

要删除此边距，您需要在
#tagsimg
元素的样式中添加
vertical align:middle
，或者找出添加
display:inline块的原因并进行更改。

您可以在这个StackOverflow问题中了解jQuery为什么这样做，以及如何避免它：
它不是边距，而是您显示和隐藏的
文本区域（
.txtags
）将其向下推，因为当显示时它会得到
显示：内联块

添加
.obj.show（）.css（{'display'：'block'}）因此两个文本区域的行为相同


$（'#seltags'）。更改（函数（）{
var obj=$（'#'+$（this.val（））；
$（'.txtags'）.hide（）；
css（{'display'：'block'}）；
});
.seltags{
显示：块；
填充：1px7px；
宽度：100%；
}
.txtags{
显示：块；
宽度：100%；
填充：5px9px；
大纲：无；
边框：1px实心#999；
边界半径：9px；
调整大小：无；
溢出y：滚动；
边缘顶端：13px；
文本转换：大写；
}
塔格西姆先生{
显示：无；
}
D.迪沃顿{
高度：14px；
背景：金；
}

标签文章
标记图像
我不知道为什么，但是
div.divbottom
没有任何边距或填充。问题是，当您显示
.tagsimg
时，它得到的是
显示：内联块
，而不是
块
，后者是
.txtags
的初始状态。使jQuery隐藏
.tagsimg
而不是从
display:none
开始，使jQuery在显示时将其更改为
display:inline block
，以修复它


$（'#seltags'）。更改（函数（）{
var obj=$（'#'+$（this.val（））；
$（'.txtags'）.hide（）；
obj.show（）；
});
$（'.tagsimg'）.hide（）
.seltags{
显示：块；
填充：1px7px；
宽度：100%；
}
.txtags{
显示：块；
宽度：100%；
填充：5px9px；
大纲：无；
边框：1px实心#999；
边界半径：9px；
调整大小：无；
溢出y：滚动；
边缘顶端：13px；
文本转换：大写；
}
塔格西姆先生{
显示：块；
}
D.迪沃顿{
高度：14px；
背景：金；
}

标签文章
标记图像
两个文本区域都应该是
内联块
或
块
这是导致该行为的两个文本区域的混合体
出现边距，因为当选择框被更改并且选择了第二个选项时，隐藏的文本区域现在得到
显示：内联块显示，隐藏的偏移量会导致边距跳转

尝试添加
垂直对齐：中间
到
.txtags
类元素的样式


$（'#seltags'）。更改（函数（）{
var obj=$（'#'+$（this.val（））；
$（'.txtags'）.hide（）；
obj.show（）；
});
.seltags{
显示：内联块；
填充：1px7px；
宽度：100%；
}
.txtags{
显示：内联块；
宽度：100%；
填充：5px9px；
大纲：无；
边框：1px实心#999；
边界半径：9px；
调整大小：无；
溢出y：滚动；
边缘顶端：13px；
文本转换：大写；
垂直对齐：中间对齐；
}
塔格西姆先生{
显示：无；
}
D.迪沃顿{
高度：14px；
背景：金；
}

标签文章
标记图像
您的第一个文本区域显示为
块


但这里的技巧是，当您显示第二个文本区域时，它会显示为一个
内联块

我建议您使用
内联块
或删除该属性。

以下是一个工作片段和一些其他注释：


//优化函数
$（'#seltags'）.change（function（）{
$（'.txtags'）.hide（）；
$（'#'+$（this.val（））.show（）；
});
.seltags{
显示：块；
填充：1px7px；
宽度：100%；
}
.txtags{
/*display:inline block；/*这是我更改的内容*/
宽度：100%；
填充：5px9px；
大纲：无；
边框：1px实心#999；
边界半径：9px；
调整大小：无；
溢出y：滚动；
边缘顶端：13px；
文本转换：大写；
}
.hidden{/*已更改名称*/
显示：无；
}
D.迪沃顿{
高度：14px；
背景：金；
}

标签文章
标记图像
这很有趣，你的答案将修复它并保留空间，而我的答案不保留空间…@DontVoteMeDown我实际上在你评论之前编辑了答案。。与yourshow相同的方法您知道隐藏的文本区域变成了内联块吗？它在css中声明为
block
，因为jQuery object.show（）将标记上的css样式设置为“display:inline block”。如果您在选择选项时检查DOM中的元素，您可以看到这种情况。请注意，我如何才能准确地检查这种情况。在源代码中，在控制台中。。。哪里？如果您使用的是Chrome，右键单击可见文本区域，然后从关联菜单中选择“检查元素”。然后您应该看到dom元素。尝试选择第二个选项，您将看到文本区域上的“显示”样式切换。您如何知道隐藏的文本区域变为
内联块
？它在css中声明为
block
。@我几乎可以肯定，当您执行
show（）
时，jQuery会获取曾经在css中声明的值并使用它。如果已经显示：无