CSS，嵌套divs和邊距與填充

我完全理解盒子模型。這個問題更多的是試圖確定關於何時使用邊距以及何時使用填充的語義方法。CSS，嵌套divs和邊距與填充

這裏是一個典型的例子，

首先，用簡單的英語：

情況：我們有一個div容器，其內部有一個段落元素。
目標：在div的內部和段落的外部之間有一個12px的空間。
選項）應用填充的12px的到div容器
選項B）適用12px的利潤率段落元素

，或者，如果你願意的話，HTML：

<div id="container"> 
    <p>Hello World!</p> 
</div>

和CSS：

選項a）

div#container {padding: 12px;}

選項B）

p {margin: 12px;}

乾杯！

喬恩

來源

2009-09-14 jon

我以爲有一個問題..有一個嗎？ – jrharshath 2009-09-14 03:14:59

「語義方法論」？我不認爲這意味着你的想法。 – annakata 2009-09-14 05:56:08

個人而言，我更喜歡選項A.爲什麼？現在說我必須將其他HTML元素添加到div中，並且我希望保持填充，我不必將其他規則添加到我的CSS文件以使其工作。

來源

2009-09-14 03:14:48 Dhana

對我來說，這是最好的答案。但你必須考慮你的具體情況。看到「Itay Moav的」答案。 – jon 2009-09-14 05:52:59

上師

垂直填充 - 因爲如果我決定要在多個段落我會使用底邊距之間的不同量的垂直空間，漂亮的頂/底部封閉師填充假設你只有靜態定位的元素，它們總會保持不變。

來源

2009-09-14 03:13:36

這取決於你想要在視覺上完成什麼。 container會有其他的子元素可能會在段落的任何一側掛到排水溝上？如果是這樣，保證金更有意義。但是，如果container對於所有元素週期都應該有12像素的裝訂線，則最好使用填充以避免必須將邊距應用於多個元素集。

一般而言，您總是希望段落具有垂直邊距以確保一致的段落領先。

來源

2009-09-14 03:13:59

你是什麼意思的「陰溝」？ :) – jon 2009-09-14 03:15:06

@jon排水溝是文字的一個或多個側面上未使用的空間。它與保證金不同，因爲它可能對圖形元素掛入排水溝有意義。 – 2009-09-14 03:17:06

感謝您的解釋！ – jon 2009-09-14 03:19:38

區別在於邊框位置。

邊界位於邊緣和填充中間的SMACK DAB。如果您指定邊距，即邊界外的空白區域。

如果指定填充，即白色空間內的邊界（推動邊境更遠從元素）

你能不能在這裏顯示，由於CSS剝離，但嘗試了這一點：

 

<body style="background-color: #aaa"> 
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;"> 
    i have margins, padding and a border. 
</p> 

<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;"> 
    i have margins, and a border. 
</p> 

<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;"> 
    i have padding and a border. 
</p> 
</body>

其他的東西！