0

CSS ボックスで奇妙なエラーが発生しました。段落タグ間のスペースが大きくなっています:

ご覧のとおり、ヘッダーと段落の間に複数行の間隔があります

HTML は次のようになります。

<div class="exampleboxshadowf">
<span class="examplelabelboxshadow">

<h1>Introduction</h1>
<p>Some info</p>
<h1><em>Location, Location</em></1>
<p>More Info</p>

ボックスの CSS は次のとおりです。

div.exampleboxshadowf {
background-color: #eee;
position:fixed;
top:30px;
left:100px;
float:none;
margin-top: auto;
margin-right: auto;
height: 575px;
width:840px;
text-align: center;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
 overflow: scroll;
}

そして、フォントと p、h タグを次のように設定しました。

h1 {
font-size: 16px;
font-family: 'Noticia Text';
}

h2 {
font-size: 18px;
 font-family: 'Noticia Text';

}

p {
font-size: 15px;
  font-family: 'Noticia Text';

}

body, span {
margin:0;
padding:0;

}

Noticia Text はインポートされた Google フォントであり、正しく動作していることを確認できます。

このような奇妙な間隔の原因は何ですか?

4

1 に答える 1

0

h1およびの余白を指定h2し<p>ます。position: fixedまた、 がある場合は余白が必要ないことに注意してください。コードは次のとおりです。

div.exampleboxshadowf {
     background-color: #eee;
     position:fixed;
     top:30px;
     left:100px;
     overflow: scroll;
     height: 575px;
     width: 840px;
     text-align: center;
     -webkit-box-shadow: 0 0 5px 5px #888;
        -moz-box-shadow: 0 0 5px 5px #888;
             box-shadow: 0 0 5px 5px #888
}
div.exampleboxshadowf h1 {
     font-size: 16px;
     font-family: 'Noticia Text';
     margin: 5px auto
}
div.exampleboxshadowf h2 {
     font-size: 18px;
     font-family: 'Noticia Text';
     margin: 5px auto
}
div.exampleboxshadowf p{
     margin: 5px
}
于 2013-01-21T17:00:19.420 に答える