Question

我有以下html：

 <body>           
   <div id="content">
      <div class="mainlogo">
         <div class="logo">
            <a href="http://somepage.com/"><img src="images/image.jpg" border="0"/></a>
         </div>
         <div class="content-name">
           <h1>Content One</h1>
         </div>
      </div>
      <div id="compinfo">
         <h1>Information.....</h1>
      </div>
      <div class="frame">
         <div class="iframe">
            <iframe src="somecontent.html/"></iframe>
         </div>
      </div>
   </div>
</body

我的css如下：

.mainlogo 
{
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
}

.logo 
{
    position:absolute;
    font-size: 35px;
    top: 5px;
    float:right;
}

.nav
{
    width: 20%;
    height: 20px;
}

.nav a
{
    display: block;
    background: #c8c8c8;
    height: 100%;
    text-align: center;
    text-decoration:none;
    font-family:Sans-Serif;
    font-size:large;
}

a:visited
{
    text-decoration:none; 
}

.nav a:hover
{
    background: green; 
}

/*h1
{
    font-size:70px
    color: #121b50;
    font-style:italic;
    /*margin: 10px 30px 18px -600px;
    font-family:"pt-sans-narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding-right: 50px;
}*/

h1{
    font-style: italic;
    /*margin: 5px -600px -50px 300px;*/
    font-family: "pt-sans-narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    float:right;
}

a
{
  color:#0000FF;
}

.content-name h1
{
    text-align:right;
    padding-top: 5px;
}

.iframe
{
    text-align:center;    
}

.frame
{
   padding-top: 5px; 
}   


#compinfo
{
    margin-top: 70px;
    margin-left: 18px;
    text-align:left;
    color: #333;
    line-height: 1.5em;
    font-family: Arial;
    font-size: 0.8em;  
}

加载页面时，徽标部分与文本和部分之间会有一些额外的差距。

什么可能是错的？如何更正它，以便徽标部分和部分之间不会出现间隙？

谢谢

Answer 1

默认情况下，标题标记上有边距，请尝试在h1标记中添加边距为零。这可能会造成差距。

h1 {
margin: 0;
}

如何在我的页面上更有效地使用div标签？

1 个答案: