Html 把它推进去

我想了解一些CSS

我想了解的是为什么给

文章

留空白：15px（或任何地方）将其边距推到div内部而不是外部？这是什么财产？为什么

请注意，CSS中没有给出该属性。
如果我正确理解了您的问题

边距是框的外部区域，填充是框的内部区域。在本例中，页边距底部与文章关联，该部分具有黄色背景和红色边框，位于主内容框内。底部边距将文章从主要内容区域的底部向上推。将文章框内的文本向上推的是填充（设置为20px）和页脚（向右对齐）

文章文本被填充向右推

此外，文章框位于主节框内，主节框有一个绿色边框，这是向左推的内容，但它是边距设置。
以下是相关的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>

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

如果
#main_部分
没有浮动，那么边距将以通常的方式折叠

参考：

注意：由于
#main_部分
上的边框，此示例稍微复杂一些。
边框的存在将防止
项目
子元素上的垂直边距与父块上的边距折叠。要查看效果，请更改
border
到
outline
并取出
float
，这使得块格式上下文的效果更容易识别
 如果我正确理解你的问题，这与盒子大小有关

box-sizing:content-box;

默认。宽度和高度属性（以及最小/最大属性）仅包括内容。不包括边框、填充或边距

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

还要注意示例中的-webkit--moz-前缀


参考规范。熟悉方框模型和边距的行为。什么是“尊重边框”？
box-sizing:border-box;  

#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;
}