使用CSS來定義元素之間的間距

我不是一個HTML/CSS專家，並一直試圖實施一些最佳做法。在最近的一個項目中，我完成了我的<h>, <div>, and <p>標籤中90％的標籤（例如）在外觀元素之前或之後具有白色間距，並且間距經常變化。我最近開始將所有內聯樣式移動到外部樣式表。當樣式是內聯時，非常清楚元素之間有多少空間。將它們移動到外部文件後，它確實不清楚。當看着我不知道的html時，「這個<div>在它之前或之後是否有空格？它是否從基礎樣式表中獲得空格？是否在其他文件中被覆蓋？」使用CSS來定義元素之間的間距

爲此，我在基地的CSS文件中定義的幾類：

.singleSpaceAfter 
{ 
    padding-bottom:1em; 
} 
.singleSpaceBefore 
{ 
    padding-top:1em; 
} 
.doubleSpaceAfter 
{ 
    padding-bottom:1.5em; 
} 
.doubleSpaceBefore 
{ 
    padding-top:1.5em; 
}

然後我在我的<div>, <p>, <h>元素應用這個類和它的 A）明確當空間存在 B）類名不明確足夠多的空間（padding-top：1em..1.1em，1.2em ..），所以它很靈活。

在html是內容而css是佈局的前提下，我瘋了嗎？

我的css文件非常小，我喜歡那樣。如果我必須通過元素ID指定所有我的<h>, <p> and <div>標籤的間距，它們將變得非常大且複雜。

我還沒有看到其他人應用我上面使用的方法，所以我相當有信心它違反了一些最佳實踐，但到目前爲止，我喜歡它，它適用於我。我希望得到一些明智的論點，爲什麼這是好的或不好的。

感謝您的所有意見到目前爲止。我確實使用了Eric Meyer的CSS Reset（我從另一個stackoverflow帖子發現:-)，但並沒有認爲它與我的實現相關。

至於在底部定義額外的間距/邊距/填充：這感覺就像我會不斷（50％的時間）必須在其他CSS文件中覆蓋它們。我認爲這會導致各種「神祕」間距。就元素id來設計每個單獨的元素來說，它看起來會很雜亂。我可能有100多個div/p元素，並且爲每個人在一個單獨的文件中定義填充（他們每個人都有兩個或三個變體之一）只是感覺混亂。以及它使html更少描述性。

我描述的方法似乎使html非常可讀（就空間而言，沒有任何歧義），總共css是20行。

感謝您儘快回答我的問題。我期待一些更多的noob引用

來源

2011-08-08 ASmith

如果它適合你，那麼它沒有錯:) –

你應該使用Firebug或內置於現代瀏覽器的開發工具。您可以右鍵單擊並選擇「檢查元素」以查看*完全*活動的樣式以及它們來自哪裏。這是一個解決的問題，沒有理由不知道元素具有什麼樣式值。 – zzzzBov

我已合併您的未註冊帳戶，您現在可以根據您收到的答案編輯您的問題/留下評論並接受答案。請考慮將OpenID與您的帳戶相關聯，以避免將來出現此類斷開連接。 –

使用CSS reset，然後按照您想要的方式對元素進行樣式設置。這確保了瀏覽器之間的一致性。

來源

2011-08-08 20:50:40

你的方法似乎對我來說是明智的。我使用類似的方法處理字體大小和顏色我有一個文本，textlarge，textxlarge等，關鍵是它是可重用的，並不複雜。只要它很容易爲你維護，那麼就採用這種方法。

但是，我會告誡，不同的瀏覽器呈現HTML的方式不同，例如，IE與Gecko vs.工具套件中對象之間的默認填充和間距不同。爲了克服這個問題，我通常應用全球風格* {padding：0px; margin：0px;}不幸的副作用是丟失UL標籤的默認tabb

來源

2011-08-08 20:51:35 Feuerwehrmann

通常的做法是首先使用CSS重啓。由於不同的瀏覽器對於每個html標籤都具有不同的邊距和填充默認值以及其他內容。 CSS重置將同一根腳上的所有瀏覽器關閉。

從這裏您可以爲每個元素聲明一些基礎樣式。記住元素不僅具有填充，而且還具有邊距。利潤率也將彙集在一起形成一個優先利潤率最高的單一利潤率。

來源

2011-08-08 20:52:23 Jrod

據我所知，這樣做很好，它不違反最佳實踐，它使你的代碼非常易讀，這是決定什麼是最佳實踐的重要因素。以一種合理的方式命名你的類沒有任何問題。而且，使用em定義間距正是因爲這個原因而得心應手;它會根據您的字體大小進行調整。

來源

2011-08-08 20:52:46 mountaingirl

我看到的唯一問題（不是說錯了）就是說，他們告訴你「我們可以在幫助頁面中添加額外的空間」，那麼你需要將所有的幫助頁面改爲「DoubleSpaceAfter '，這種方式擊敗了CSS的優點之一。如果你可以在語義上定義樣式，比如'help_header'，'help_text'等（不是通過ID，而是通過類，這會使得它更加可重用），那麼你只需要改變CSS文件中的類樣式而不用接觸HTML。

來源

2011-08-08 21:03:47 Rodolfo

我已經看到，類命名約定之前經常使用，它總是困擾我。現在，這可能歸結爲開發者風格和個人偏好，但這是我的推理。正如你所說HTML是用於內容的，CSS是用於視覺設計和佈局的。因此，使用指示內容的視覺方面的類名稱違背了該原則。

相反，找出爲什麼一些段落有更多的填充。也許，這是因爲引言文本總是被填充得更多。也許側邊欄的段落總是比主要內容填充更多。如果是真的武斷，那對我來說似乎很陌生。

一旦你確定了你有不同類型的內容，然後拿出適當的類名稱。你可能發現你甚至不需要申請課程，並且發現你可以使用不同的選擇器，可能包括：

.mainContent p:first-child 
.sideBar p 
.comment p

來源

2011-08-08 21:04:10 gilly3

如果它適合你，那麼就去吧。但它違反了一些最佳做法。我強烈推薦一個CSS Reset，比如Eric Meyer's，然後從那裏應用你的樣式。我個人不喜歡每個元素有多個類，除非絕對必要，但正如我所說，如果它對你有用，沒有人告訴你改變它，那麼你可以繼續這樣。不過，我建議您嘗試重置並查看如何/如果您喜歡它，因爲那樣您可以設計每個元素的樣式而不必擔心變化的空白。而且，如果你不喜歡它，你可以回到你現在正在做的事情上。

來源

2011-08-08 21:08:35

使用CSS來定義元素之間的間距

回答

相關問題