現在、em 単位で Web ページをデザインしています。2 つの別々の span タグを margin-left で揃えようとしたときに問題が発生したため、思ったほど理解できていないのでしょう。それらはヘッダーの左上隅に配置されました。それらは、display:block を使用して互いの上に配置されました。margin-right を使用して両方のスパン タグを整列させたところ、大きいスパンと小さいタグが正しく整列しませんでした。margin-right に同じ番号を使用しましたが、それでもめちゃくちゃでした。
- これは私が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;
}