股利利潤率推動這裏面

Question

我想多瞭解一點CSS的

http://jsfiddle.net/f2mZz/

我想明白的是爲什麼給articlemargin-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，這mmakes塊格式化上下文的影響比較容易辨別。

Answer 2

如果我理解正確你的問題......

保證金是區域框外，並填充裏面的區域。在這種情況下，頁邊空白與文章相關聯，該部分的背景爲黃色，紅色邊框位於主內容框內。底部邊距將文章從主要內容區域的底部向上推。什麼推動文章框內的文本是填充，它被設置爲20像素，和頁腳，這是正確的。

文章文本被填充右移。

而且文章盒子是main_section盒子，裏面有一個綠色的邊框內，那就是什麼是左推，但它的頁邊距設置。

Answer 3

它有做箱上漿如果我正確地理解你的問題。

box-sizing:content-box; 

默認。寬度和高度屬性（和最小/最大屬性）僅包含內容。邊界，填充，或餘量不包括

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