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

Question

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

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

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

ma​​rgin-bottom 不适用

    <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>

ma​​rgin-bottom 确实适用于以下情况

    <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>

我认为在第一种情况下，带有类 form-group 的 div 包装了两个元素(比如说标签和输入)，并且 margin-bottom 会产生影响。但似乎它根本不会影响它的包装元素。

另一方面，在第二种情况下，style 属性工作正常。

为什么它们的工作方式不同？ 请告诉我原因和工作顺序，如果有的话，推荐一些描述性很好的文档来解释这样的流程。

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

https://friendlybit.com/css/rendering-a-web-page-step-by-step/ https://medium.com/@luisvieira_gmr/understanding-the-critical-rendering-path-rendering-pages-in-1-second-735c6e45b47a

提前感谢您的帮助。

Answer 1

如果您在浏览器中打开检查器 (CTRL+SHIFT+C) 并选择 form-group 元素，你会看到它没有高度，所以他不能将边距应用到另一个元素，如果你添加 display:block 或 float left 对于他们自己会理解的元素，但是，你如何使用 bootstrap，你可以使用 boostrap 中的类，这样:

编辑1 您甚至不需要使用 margin-bottom，bootstrap 中的 form-group 类已经包含了它

<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>