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 字体,我可以确认它可以正常工作。
知道是什么导致了这种奇怪的间距吗?
最佳答案
为 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
}
关于CSS Div/Box 字体问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14443560/