CSS边框出现异常行为：.message类样式不符合预期求助

嘿，我来帮你看看为啥自定义的.message类没达到预期效果～先把你的代码放出来方便分析：

你的HTML代码： #

<div style="text-align:center;" class="container"> 
  <span class="message col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">Test</span> 
</div>

你的部分CSS代码： #

.message{ 
  margin-top: 30px; 
  height: 3em; 
  line-height: 3em; 
  font-size: 25px; 
  text-align: /* 你这里没写完，但先分析核心问题 */
}

接下来是几个大概率的原因和解决办法：

• 行内元素的样式限制：你把.message加在了<span>标签上，而<span>是行内元素（inline）。默认情况下，height、margin-top这类垂直方向的属性对行内元素是不生效的——行内元素的高度由内容决定，垂直margin也不会被渲染。
  解决办法：要么把<span>改成<div>（块级元素），要么给.message添加display: inline-block;或者display: block;属性，这样height和margin-top就能正常生效了。

• Bootstrap列类的样式冲突：你给这个元素加了col-*-12的Bootstrap列类，这些类自带一些样式（比如默认的padding、display属性），可能会和你的.message样式产生冲突。
  排查方法：打开浏览器开发者工具（按F12），选中这个元素，查看「样式」面板，看看你的.message属性是不是被划掉了——如果是，就能看到是哪个Bootstrap样式在覆盖它。
  解决办法：调整自定义CSS的优先级（比如用.container .message这种更具体的选择器），或者把自定义CSS放在Bootstrap CSS文件之后引入。

• text-align属性的生效问题：如果你的.message里设置了text-align，但因为父元素<div>已经有text-align:center的行内样式，而<span>是行内元素，会直接继承父元素的对齐方式。如果想要自定义对齐，必须先把元素改成块级/行内块级元素，不然text-align设置了也不会生效。

修改后的示例代码 #

如果不想改HTML标签，只调整CSS：

.message{ 
  display: inline-block; /* 让元素支持垂直方向样式 */
  margin-top: 30px; 
  height: 3em; 
  line-height: 3em; 
  font-size: 25px; 
  text-align: left; /* 现在这个对齐设置会生效了 */
}

如果愿意调整HTML标签：

<div class="container"> 
  <div class="message col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">Test</div> 
</div>

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