0

パディングで奇妙なエラーが発生しています。2 列のレイアウトを作成していますが、フッター div にパディングを追加しようとすると、必要以上のスペースが必要になります。私はすでにこの問題を探しましたが、有用な答えが見つかりませんでした。たとえば、コードに 1 ピクセルを配置すると、次のようになります。

#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 0.5em;
line-height: 1.1em;
}

ここに示すように、パディングの 1 ピクセルを超える結果になります。 ここに画像の説明を入力

上下のパディングの高さが 1 ピクセルを超えています。だから私の質問は、何がこの問題を引き起こしているのでしょうか?

私はフィドルにコードの一部を入れましたが、問題はまだ残っています. フィドル リンク: http://jsfiddle.net/KhxAW/4/

4

4 に答える 4

3

問題は<p>タグにあります。上下に余白があります。<p>CSS コードのどこかでタグの余白をリセットすることをお勧めします。

于 2013-04-12T18:06:48.413 に答える
1

フッター Div をこれに置き換えるだけです->

<div id="footer">
                <p style="display:inline">Three Rings for the Elven-kings under the sky, seven for the Dwarf-lords in their halls of stone,
                Nine for Mortal Men doomed to die, one for the Dark Lord on his dark throne, in the Land of Mordor 
                where the Shadows lie. One ring to rule them all, one ring to find them, one ring to bring them all 
                and in the darkness bind them, in the Land of Mordor where the Shadows lie.</p>
            </div>
于 2013-04-12T18:18:06.263 に答える
1 
#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 0.5em;
line-height: 1.1em;
}

パディング宣言でユニットにピクセルを使用していません... EMを使用しています。1EM は、親要素のフォントの PX サイズと同じです。したがって、フォント サイズが 12px の場合、0.5em は 6px です。

単位をPXに変更するだけです...

#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 5px;
line-height: 1.1em;
}
于 2013-04-12T18:02:16.913 に答える