Css 样式属性在html的层次结构中是如何工作的？

我是前端开发的新手。 所以，我有很多问题，我甚至不知道为什么它不能很好地工作，因为我在这方面的背景知识不足

我有一个问题，为什么当样式属性在层次结构的不同级别时，它的工作方式不同。 我正在使用引导、jquery和javascript以及css

我的代码是这样的。这是引导模式的一部分。 到目前为止，任何javascript、jquery在代码中都不相关，尽管我将向其中添加脚本

保证金底部不适用

保证金底部不适用于以下情况

我认为在第一个例子中，带有类表单组的div包装了两个元素，比如标签和输入，边距底部会起作用。但它似乎根本不影响它的包装元素

另一方面，在第二种情况下，“样式”属性可以正常工作

为什么它们的工作方式不同？ 请告诉我原因和工作顺序，如果有的话，请推荐一些详细说明流程的文件

我找到了一些关于渲染路径的链接，如下所示， 但我想要一些更具体和基本的css细节，如果我不确定它是否适合我的解决方案

---

感谢您提前提供的帮助。

这是因为元素div本身不理解它们，如果您在浏览器中打开inspector CTRL+SHIFT+C并选择表单组元素，您将看到它没有高度，因此他无法将边距应用于其他元素，如果将display:block或float left添加到元素中，它们将自己理解，但是，如何使用bootstrap，可以通过以下方式使用bootstrap中的类：

编辑1 您甚至不需要使用边距底部，bootstrap中的表单组类已经将其放在了边距底部

<div class="form-row">
        <div class="row">
            <div class="form-group col-sm-12" 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 class="form-group col-sm-12" 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>
    </div>

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

<div class="form-row">
        <div class="row">
            <div class="form-group col-sm-12" 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 class="form-group col-sm-12" 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>
    </div>