次のコードでは、左側のdiv
ブロックナビゲーション領域にパディングがあり、ブロックの上部に固定(または絶対)位置が1emのように見えますが、上部または左側がない別のコンテンツブロックdiv
にパディングがないのと比較して、左側にパディングがありませんdiv
パディング。これは、少なくともFirefoxとChromeに当てはまります。position: absolute
ブロックにパディングを付けないようにするにはどうすればよいですか。注:この問題は、を削除すると解消されposition: absolute
ます。どうすれば修正できますか?後でパディングが必要になることはわかっていますが、パディングがナビゲーションとコンテンツ領域で正しく表示されるようにし、ベースラインとしてパディングなしで同じように表示するようにします。
これが画像です。左側の持っている領域がどのように厚く、左側のコンテンツ領域が薄いかを見てください。
コード例は次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
background: #fff;
}
div.content {
background: #000;
margin-left: 20em;
margin-right: 4em;
border-radius: 2em;
}
p {
color: #fff;
}
div.nav {
background: #000;
width: 16em;
position: absolute;
left: 1em;
top: 1em;
border-radius: 2em
}
</style>
</head>
<body>
<div class="content">
<p>This is content area text</p>
</div>
<div class="nav">
<p>This is a nav area text</p>
</div>
</body>
</html>