需要CSS em援助

我目前正在設計一個帶em單元的網頁。我想我的理解並不像我想的那樣好，因爲當我嘗試將兩個單獨的span標籤與margin-left對齊時，發生了問題。他們被放置在我的標題的左上角。他們使用display：block定位在另一個之上。當我使用margin-right將兩個span標籤對齊時，較大的span和較小的tag沒有正確對齊。我使用了相同的數字作爲保證金 - 對，但他們仍然搞砸了。需要CSS em援助

這是因爲我使用em的？
我該如何解決這個問題？

我將粘貼下面使用的代碼，以便您瞭解我正在使用的內容。希望我已經解釋得很好。

HTML

<div class="header1"> 
     <span class="title">Title goes here</span> 
     <span class="subtitle">This is the subtitle</span> 
    </div>

CSS

body { 
    color: #333; 
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; 
    font-size: 62.5%; /* 10px */ 
    line-height: 1.28; 
} 
.main1 { 
    width: 96em; 
    /* horizontally center the website layout */ 
    margin: 0 auto; margin-top: .8em; 
    text-Align: left; /* override body {text-align:center} */ 
} 
div.header1 { 
    clear: both; 
    width: 100%; 
    height: 9em; 
    background: #ff0000; 
    color: #fff; 
} 
.title { 
    font: small-caps 700 3.7em "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif; 
} 
.subtitle { 
    font-weight: lighter; 
    font-size: 1.4em; 
}

來源

2012-12-01 JaPerk14

你說你「定位在彼此使用顯示器的頂部：塊「，但所有這些都是將內聯元素轉換爲塊級元素。你需要使用'position：absolute;'將它們放在另一個之上。做到這一點，測試你有什麼，並回復你繼續有問題。 – gregwhitworth

如果你使用'

'和'

標題

字幕

' –

'''display：block'部分在哪？ 'margin-left：'部分在哪裏？他們從您的代碼中遺失！ –

檢查波紋管鏈接我希望這將有助於你

http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

來源

2012-12-01 06:04:58

我以前見過這個網站，但我仍然不明白爲什麼我的電話號碼正在發揮作用。 – JaPerk14

嘗試px因爲EMS是大單位。 –

[鏈接只有答案不鼓勵！]（http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers/8259#8259）請寫一個完整的答案，而不僅僅是提供一個鏈接。 –

px：像素（電腦屏幕上的一個點）

em： 1em等於當前字體大小。 2em表示當前字體大小的2倍。例如，如果一個元素以12磅的字體顯示，那麼'2em'是24點。 'em'是CSS中非常有用的單位，因爲它可以自動適應讀者使用的字體。

see the reference

所以，你可以使用px代替em，其良好的實踐。

希望它能幫助你。謝謝。！

來源

2012-12-01 06:55:02

這個問題的描述非常混亂，並不能解釋你想達到什麼目的，你最好的嘗試是什麼。您可以參考左邊的和右邊距，但它們都沒有在代碼中爲所討論的元素設置。你參考設置display: block，但沒有這樣的設置。

我會假設你想讓主標題出現在字幕上方（在xy平面中）。爲此，您需要設置display: block或更好地使用div標記而不是span，或者最好使用足夠的標題標記，如h1和h2，同時適當考慮它們對垂直邊距和字體重量的默認效果（即，在CSS中覆蓋它們如果需要的話）。我假設你想讓它們左對齊相同的數量。

看來你沒有考慮到em單位的相對性。根據定義，它等於元素的字體大小（font-size除外，它等於父元素的字體大小）。

我懷疑你試圖設置span元素的左邊距使用相同的值，如1em。但這兩個元素的含義並不相同，因爲它們的em大小不同。如果你想設置的左邊距，比方說，第一個元素的字體大小，您將設置

.title { margin-left: 1em; } 
.subtitle { margin-left: 2.6429em; }

數量2.6429是字體大小，從3.7/1.4計算出的比率。

只需在封閉的div元素上設置左邊距將會更容易。其字體大小等於body元素的字體大小，因此，如果你想把它設置成主標題的字體大小，你可以使用

div.header1 { margin-left: 3.7em; }

來源

2012-12-01 08:40:52

需要CSS em援助

標題

字幕

回答

相關問題