HTML层级结构中style属性作用差异及Bootstrap样式问题求助

嘿，我来帮你理清楚这个问题～ 先从你遇到的margin-bottom差异说起：

为什么父元素设置margin-bottom不生效？ #

首先要搞懂CSS中margin的核心作用：margin是给元素自身添加的「外边距」，用来控制当前元素和其他相邻元素之间的距离，而不是直接影响它的子元素。

看你的第一种情况：

<div class="form-row">
  <div class="form-group" style="margin-bottom:10px">
    <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3 control-label">Info1</label>
    <input class="col-lg-8 col-md-8 col-sm-8 col-xs-8 input-text" id="Info1">
  </div>
</div>

这里的margin-bottom:10px是加在.form-group这个div上的，它的作用是让这个div和它下方的其他元素（比如另一个.form-group）之间产生10px的间距，并不会让内部的label/input和这个div的底部产生间距。如果想让子元素和父元素底部有间距，你应该给父元素加padding-bottom:10px，或者直接给子元素加margin（也就是你第二种情况的做法）。

第二种情况你给label和input各自加了margin-bottom:10px，这是给子元素自身加外边距，自然会让它们和下方的元素（或者父元素底部）拉开距离，所以能看到明显效果。

CSS样式的生效顺序（优先级） #

CSS样式的生效遵循「优先级规则」，优先级高的样式会覆盖优先级低的，具体从高到低排序是：

• 内联样式（就是你用style属性直接写在元素上的样式）
• ID选择器（比如#Info1这类通过元素ID定义的样式）
• 类选择器、属性选择器、伪类（比如.form-group、[type="text"]、:hover）
• 元素选择器、伪元素（比如div、::before）

如果优先级相同，那么后定义的样式会覆盖先定义的。另外还有!important标记会强制提升样式优先级，但不推荐随便使用，因为会打乱正常的样式层级，不利于后续维护。

推荐的CSS基础原理资料 #

• MDN Web Docs CSS基础系列：里面详细讲解了CSS盒模型、布局、优先级等核心概念，是前端开发者必备的官方学习资料
• 《CSS权威指南》：这本书堪称CSS领域的“圣经”，从基础到进阶的原理都讲得非常透彻，适合系统学习底层逻辑
• Bootstrap官方文档的布局章节：可以帮你理解Bootstrap自带类（比如.form-group、.form-row）的样式逻辑，避免自定义样式和框架样式冲突

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