2012-01-05 73 views
0

幾個月前,我學會了網頁設計的基礎知識,並試圖修復我設置的基本網站,以遵守標準,看起來更整潔。我寫這篇文章的方式是用不間斷的空格來分隔我的段落。我相信你們都會把你的頭髮都撕掉,但這就是爲什麼我要改善。正確的方式來空間文本?

但是,我仍然不確定,但是,正確的方式來分隔文本是。我的第一個是使用邊距,這意味着要設置段落元素的顯示來阻止。鑑於改變元素結構是錯誤的,因爲考慮到可能有更合適的元素使用,我決定檢查一些網站,看看他們是如何做到的。我檢查的每一個都使用CSS中的display:block和margin屬性。

這是正確的方法嗎? HTML5中有替代它的東西嗎?如果我確實使用HTML5,這是否意味着舊版瀏覽器將無法正確顯示它?

+0

之外,還檢出CSS屬性'線height' – buley 2012-01-05 23:21:41

回答

2

爲每個段落使用標籤<p>

HTML 5向後兼容。

P標記不是HTML 5的排除標記。它適用於所有版本的HTML。

+1

p元素IS HTML5如同所有其他元素。這都是超文本標記語言。 – Rob 2012-01-05 23:02:58

+0

我的意思是,P元素在以前的版本中工作。我將編輯帖子..謝謝 – 2012-01-05 23:13:14

0

這聽起來像你想控制你的段落之間的空間,這是正確的嗎?您不必將p元素設置爲塊顯示。如果您希望段落間距在所有瀏覽器之間保持一致,我建議首先要確保所有瀏覽器都使用完全相同的間距,方法是將邊距重置爲空。檢查埃裏克邁爾非常着名的CSS reset給你一個很好的清潔石板開始。接下來,在您的CSS中,您可以爲您的段落設置一個邊距,以確保它們之間有多大的空間。請注意,如果您只是使用margin:屬性而不是margin-bottom,則段落將會翻倍(第二段的margin-top將添加到第一段的margin-bottom,依此類推)。

這一切復位,你可能把這樣的規則在你的CSS:

p { 
margin-bottom: 16px; /* Sets the margin only below the paragraph element */ 
text-indent: 10px; /* Indents the first line of your paragraph */ 
} 

另外,請記住,CSS重置往往撕出一個瀏覽器的默認設置的很多關於你的標記,所以記住,當你的h1標籤看起來很小而且不再粗體時!希望這可以幫助。

+0

這將意味着使p元素顯示塊。我的問題是,如果這是正確的做法? – mowwwalker 2012-01-05 23:27:13

+0

我從來沒有設置p顯示:塊。即使它是內聯元素,即使使用Eric Meyer的CSS重置,p仍然有換行符。如果你正在談論「正確的方式」,我認爲很多設計師會通過使用CSS重置來爲遊戲平臺設置水平,然後爲元素構建自己的邊距和填充,以便在所有瀏覽器中獲得相同的像素。 – huzzah 2012-01-05 23:36:17

+0

我在說你不能在內聯元素上有一個邊界,這是默認的。 – mowwwalker 2012-01-05 23:41:57

1

p元素塊元素,採用HTML術語,默認情況下也採用CSS術語。因此,如果您更喜歡與默認邊距不同的東西(無左邊距或右邊距,但頂部和底部邊距通常分別對應一條空行),則可以在其上設置邊距。您在CSS中專門設置的內容取決於您希望實現的內容,這在問題中並不明顯。

默認渲染的段落之間用空行等值分隔,遵循簡單辦公自動化系統和舊打字機的實踐。如果您喜歡更傳統的書本式渲染,則可以通過第一行縮進來替換空行,例如,

p { margin: 0; text-indent: 1em; } 
從下面提到的邊距屬性