如何将<div>元素样式设置为与TextArea外观一致？

1. 优先复用表单元素的现成样式类 #

如果你的项目用了Bootstrap这类UI框架，表单里的<textarea>大概率用了.form-control类，直接把这个类加到你的TextDiv上，这是最快匹配样式的方法：

<div class="col col-sm-11 TextDiv form-control" >
   @Html.Raw(Model.Body)
</div>

2. 手动复刻textarea核心样式（当复用类无效时） #

如果框架类不适用，就手动写CSS还原textarea的关键特性，同时处理邮件内容的样式干扰：

.TextDiv {
  /* 匹配textarea的基础外观 */
  border: 1px solid #ced4da; /* 边框颜色和宽度，根据你的实际样式调整 */
  border-radius: 0.25rem; /* 圆角大小 */
  padding: 0.375rem 0.75rem; /* 内边距 */
  font-size: 1rem;
  font-family: inherit;
  background-color: #ffffff;
  overflow-y: auto; /* 垂直滚动条 */
  min-height: 120px; /* 最小高度，和textarea保持一致 */
  
  /* 隔离邮件内部样式的干扰 */
  margin: 0;
  box-sizing: border-box;
}

/* 重置邮件内容里的元素默认间距，避免撑出额外空间 */
.TextDiv * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

3. 解决样式优先级冲突 #

如果自定义CSS没生效，大概率是选择器优先级不够，或者被邮件内部的行内样式覆盖：

• 用更具体的选择器，比如：.col-sm-11.TextDiv 或者 div.row .TextDiv
• 必要时给属性加!important（尽量少用，优先调整选择器优先级）

4. 极端情况：用iframe隔离样式 #

如果邮件内容自带大量复杂CSS，完全干扰外部样式，可以把内容放到iframe里，彻底隔离：

<div class="col col-sm-11">
  <iframe class="TextDiv" srcdoc="@Html.Raw(HttpUtility.HtmlEncode(Model.Body))" frameborder="0"></iframe>
</div>

然后给iframe设置和textarea一致的样式（宽高、圆角、边框等）。

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