你把你的CSS頁邊距放在哪裏？

當你想添加HTML元素之間的空白（使用CSS），你附加到哪個元素？你把你的CSS頁邊距放在哪裏？

我經常在我沿着這些線路情況：

<body> 
    <h1>This is the heading</h1> 
    <p>This is a paragraph</p> 
    <h1>Here's another heading</h1> 
    <div>This is a footer</div> 
</body>

現在，說我想1EM的這些元素之間的空間，但沒有上面的第一個H1或最後一個div下面。我會附加哪些元素？

顯然，有此之間沒有真正的技術區別：

h1, p { margin-bottom: 1em; }

...這...

div { margin-top: 1em; } 
p { margin-top: 1em; margin-bottom: 1em }

我很感興趣的是次要因素：

一致性
適用於所有情況
易於/簡單
製作易於改變

例如：在這個特殊的情況下，我會說，第一個解決方案比第二個好，因爲它更簡單;你只在一個屬性定義中附加一個margin-bottom到兩個元素。不過，我正在尋找更通用的解決方案。每次我做CSS工作時，我都會覺得應該有一個好的經驗法則......但我不確定它是什麼。有沒有人有一個很好的論點？

來源

2008-09-19 Craig Walker

我傾向於使用的元素底部邊緣時，我希望他們的下一個元素之前有空間，然後使用「去年」類中的CSS從最後一個元素去除餘量。

<body> 
    <h1>This is the heading</h1> 
    <p>This is a paragraph</p> 
    <h1>Here's another heading</h1> 
    <div class="last">This is a footer</div> 
</body>

div { margin-bottom: 1em; } 
p { margin-bottom: 1em; } 
h1 { margin-bottom: 1em; } 
.last {margin-bottom: 0; }

在你的榜樣，雖然，這可能不是是適用，作爲頁腳股利將最有可能有它自己的種類和具體的造型。當我依次有幾個相同的元素（段落和不是）時，我仍然使用「.last」方法。當然，我從「元素」CSS框架中挑選了這種技術。

來源

2008-09-19 22:32:55 Pavling

如果你不介意迴避IE6，你總是可以回頭看看CSS2：first-child和last-child僞選擇器來做你的出價！ – 2009-12-04 18:44:53

我傾向於同意你的看法，第一種選擇更好。這通常是我喜歡做的事情。但是，有一種觀點需要指出，您應該爲每個元素指定一個邊距，如果您不想應用它，則會將其歸零，因爲瀏覽器都會以不同方式處理邊距。 <p>（以及我認爲的<h1>標籤）通常會有瀏覽器給定的默認頁邊距，如果沒有指定。

來源

2008-09-19 22:33:21

這要由你正在設計什麼的細節部分驅動的，但有一種粗糙的層次結構的這些東西，比方說，一個典型的博客索引：

你會在頁面上有一個頁腳。
你將有一個標題每條目。
你將有每個條目n段落。

爲您的段落建立空格，知道它們有時會按順序出現 - 您需要擔心它們如何看起來像一個系列。從那裏，調整你的頭來處理條目之間的邊界。最後，調整您的頁腳/頁面空間以確保頁面底部看起來不錯。

這是一個縮略圖草圖。你如何最終落得分配你的填充是完全取決於你，但如果你從自下而上的角度來看待它，你可能會看到更少的驚喜你調整第一最常見的/豐富的元素，然後後的不太常見的。

來源

2008-09-19 22:34:59

如果你想要一個元素周圍的空間，給它一個邊緣。這意味着，在這種情況下，不要只給<h1>一個底部空白，但給<p>一個頂部空白。

請記住，當兩個元素垂直相鄰，並且它們之間沒有邊框或填充時，它們的邊距將摺疊。這意味着只考慮兩個邊界中較大的邊界 - 它們不會加在一起。所以這個：

h1, p { margin: 1em; } 

<h1>...</h1> 
<p>...</p>

...會導致標題和段落之間1em的空格。

來源

2008-09-19 23:03:56 Jim

吉姆所做的一點是關鍵。元素之間的邊距崩潰，它們不是疊加的。如果你想要確保在段落和標題之上和之下有1em的保證金，並且頁眉下方和頁腳上方有1em保證金，那麼你的CSS應該反映這一點。

鑑於這種標記（我添加了一個頭，並放置在頁眉/頁腳IDS）：

<body> 
    <div id="header"></div> 
    <h1>This is the heading</h1> 
    <p>This is a paragraph</p> 
    <h1>Here's another heading</h1> 
    <div id="footer">This is a footer</div> 
</body>

你應該使用這個CSS：

#header { 
    margin-bottom: 1em; 
} 

#footer { 
    margin-top: 1em; 
} 

h1, p { 
    margin: 1em 0; 
}

現在你的元素的順序沒關係。如果您使用了兩個連續的標題，或者使用段落而不是標題來啓動頁面，它仍然會呈現您所注意的方式。

來源

2008-09-21 05:35:17 Prestaul

採用先進的CSS 2個選擇器，另一種解決方案是可能的，不依賴於一類last引進佈局信息入HTML。

該解決方案使用adjacent selectors。不幸的是，MSIE 6不支持它，所以不願意使用它是可以理解的。

h1 { 
    margin: 0 0 1em; 
} 

div, p, p + h1, div + h1 { 
    margin: 1em 0 0; 
}

這樣，第一h1不會有頂邊距，而緊隨其後段落或盒子任何h1具有上邊距。

來源

2008-09-21 17:44:15

我是一個相對的新手，但我自己解決的事情，我認爲你和我碰到了（改變邊距一個標籤可以在一個網站的一部分梳理間距，只有打擾以前好在其他地方的間距？）現在是爲所有標籤分配一個相等的邊緣頂部和底部。你可能希望H1以上和以下的空間比H3或ap要多，但總的來說，我認爲頁面在任何給定的文本上方和下方都有相同的空間，所以這個解決方案適用於我，滿足你的'簡單經驗法則'規範，希望！

來源

2009-04-25 10:12:24

我剛剛使用了第一個孩子和最後一個孩子。因此，例如純CSS：

h1{ 
    margin-top:10px; 
    margin-bottom:10px; 
} 
h1:first-child{ 
    margin-top:0px; 
} 
p{ 
    margin:10px; 
} 
p:first-child{ 
    margin-top:0px; 
} 
p:last-child{ 
    margin-bottom:0px; 
}

這是一個基本的例子，但你可以申請這更多的元素和結構是更好，如果使用SASS，LESS等等:)

來源

2015-11-27 10:13:35 JDavies

這是應該的完成：

body > * { 
    margin-bottom: 1em; 
} 
body > *:last-child { 
    margin-bottom: 0; 
}

現在，你不必擔心什麼元素是第一，什麼元素是最後一個，你不必總是把一類特殊的最後一個元素上。

這將不會「工作」的唯一時間是最後一個孩子是沒有渲染。在這種情況下，你可以考慮在最後一個可見的孩子上使用margin-bottom:0;。

來源

2016-01-14 21:05:18

你把你的CSS頁邊距放在哪裏？

回答

相關問題