Question

我正在尝试理解一些CSS

我想了解的是为什么给article margin-left: 15px;（或任何地方）将其边距推到div内而不是在外面？这是什么属性以及为什么？

请注意，在CSS中没有给出属性。

Answer 1

以下是相关的HTML：

<section id="main_section">
    <article>
        <header>
            <h1>titlu articol 1</h1>
            <p>subtitlu</p>
        </header>
        <p>continut articol</p>
        <footer>
            <p>articol scris de bunica</p>
        </footer>
    </article>
    <article>
        <header>
            <h1>titlu articol 2</h1>
            <p>subtitlu</p>
        </header>
        <p>continut articol 2</p>
        <footer>
            <p>articol scris de bunica</p>
        </footer>
    </article>
</section>

你有以下CSS：

#main_section {
    border: 1px dashed green;
    float: left;
    width:660px;
    margin: 30px;
    /*720->280*/
}
article {
    background: #FFFBCC;
    border: 1px dotted red;
    padding: 20px;
    margin-left: 15px;
}

#main_section elmement向左浮动，这意味着它建立了一个块格式化上下文。这意味着子元素的任何边距（在本例中为article元素）都与父元素（#main_section）的边界框对齐。

如果#main_section没有浮动，那么边距会以通常的方式崩溃。

参考：http://www.w3.org/TR/CSS21/visuren.html#block-formatting

注意：由于#main_section上的边框，此示例稍微复杂一些。边框的存在将阻止article子元素上的垂直边距与父块上的边距折叠。要查看效果，请更改 border到outline并取出float，这样可以更轻松地识别块格式化上下文的效果。

Answer 2

如果我正确理解你的问题......

边距是框外的区域，填充是内部区域。在这种情况下，边距底部与文章相关联，该部分具有黄色背景和红色边框，其位于主内容框内。底部边缘将文章从主要内容区域的底部向上推。什么是文章框内的文本推送是填充，设置为20 px，页脚，右侧对齐。

文章文本被填充向右推。

此外，文章框位于main_section框内，该框具有绿色边框，这是向左推的，但它是边距设置。

Answer 3

如果我正确理解您的问题，则与大小调整有关。

box-sizing:content-box;

默认。 width和height属性（以及min / max属性）仅包含内容。不包括边框，填充或边距

box-sizing:border-box;

宽度和高度属性（以及最小/最大属性）包括内容，填充和边框，但不包括边距

另请注意示例中的 -webkit- -moz - 前缀

jsfiddle example

#first{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background: red;
}
#second{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: yellow;
}
div{
    width:50px;
    height:50px;
    border: 20px solid black;
    margin:20px;
    padding:20px;
}

Div将其推入内部

3 个答案: