咨询：选择选项变更时div边距异常变化的问题排查

嘿，我仔细看了你的代码，问题的根源其实出在.txtags的margin-top属性上，结合jQuery的hide()/show()方法导致了布局跳动：

原因拆解 #

当你调用$('.txtags').hide()时，jQuery会把元素的display设置为none——这时候该元素完全脱离文档流，它的margin-top:13px不会对周围元素产生任何布局影响。而当你用obj.show()让目标元素重新显示时，元素恢复为display:block，这时候margin-top突然生效，会把下方的.divbottom元素往下推，视觉上就表现为div的边距“变了”。

修复方案（推荐两种） #

方案1：将margin-top转移到父容器的padding #

这是最稳妥的方法，能彻底避免布局跳动。你只需要给.txtags的父容器添加padding-top，同时移除.txtags自身的margin-top：

修改后的CSS：

.seltags { display: block; padding: 1px 7px; width: 100%; } 
/* 新增父容器样式（如果没有父容器，给txtags套一个div，类名比如tags-wrap） */
.tags-wrap {
  padding-top: 13px;
}
.txtags { 
  display: block; 
  width: 100%; 
  padding: 5px 9px; 
  outline: none; 
  border: 1px solid #999; 
  border-radius: 9px; 
  resize: none; 
  overflow-y: scroll; 
  /* 移除原来的margin-top */
  text-transform: uppercase; 
} 
.tagsimg { display: none; } 
.divbottom { height: 14px; background: gold; } 

对应的HTML结构（如果之前没有父容器）：

<select id="seltags" class="seltags">
  <!-- 你的选项 -->
</select>
<div class="tags-wrap">
  <textarea id="tag1" class="txtags">...</textarea>
  <textarea id="tag2" class="txtags">...</textarea>
</div>
<div class="divbottom"></div>

原理：父容器的padding-top是始终存在的，不管子元素显隐，父容器的占位高度都保持稳定，下方的.divbottom不会受到影响。

方案2：用visibility替代display控制显隐（适合需要保留元素占位的场景） #

如果你希望隐藏元素时依然占据页面空间，可以把jQuery的hide()/show()换成控制visibility属性：

修改后的jQuery代码：

$('#seltags').change(function() { 
  var obj = $('#' + $(this).val()); 
  $('.txtags').css('visibility', 'hidden'); 
  obj.css('visibility', 'visible'); 
}); 

原理：visibility:hidden只是让元素不可见，但依然会占据文档流空间，它的margin-top始终生效，所以布局不会跳动。缺点是隐藏的元素依然占位置，可能不符合你的交互需求，按需选择。

验证效果 #

修改后切换下拉选项时，.divbottom的位置就不会再发生变化了，布局保持稳定。

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