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

Question

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

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

我的代码是这样的。它是 bootstrap 模态的一部分。到目前为止，任何 javascript、jquery 在代码中都不相关，即使我会向其添加脚本。

底部边距不适用

    <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 确实适用于以下情况

    <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-group 包装了两个元素，（比如说标签和输入），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) 并 select form-group 元素，你会看到它没有高度，所以他不能将边距应用到另一个元素，如果你向元素添加 display:block 或 float left 他们会自己理解，但是，你如何使用 bootstrap，你可以使用 boostrap 中的 classes，这样：

EDIT1 你甚至不需要使用 margin-bottom，bootstrap 中的 form-group class 已经把它

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

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

How does style attributes work in hierarchical structure in html?

css

html-rendering