0

只是想知道如何摆脱标题中不必要的外观空间。我希望我的标题看起来类似于捕获 2（第二张图片），但有一些我似乎无法摆脱的不必要的空间。我通过 jsfiddle 运行它：http: //jsfiddle.net/yT6h6/即使我认为代码没有任何问题，我仍然可以看到空格。请看看这个，如果你能帮助我，我们将不胜感激。

HTML 代码：

<div class="content">
    <div class="heading"><b style="font-size:14px; font-family:'Arial', Gadget, sans-serif"><b style="font-size:9px;"><a href="default.html" class="link5">Home \\</a> <a href="current_students.html" class="link5">Current Students \\</a></b>
</b>
        <br />FBE Degrees &amp; Electives
        <br>
<span class="style11">FBE Degrees &amp; Other Courses for FBE students including Elective courses</span> 
    </div>

CSS 代码：

.heading {
    height: auto;
    width: 525px;
    background-color: #333333;
    font-family:"Courier New", Courier, monospace;
    font-size: 28px;
    color: #DBDBDB;
    padding-left: 30px;
    font-weight: bold;
    padding-top: 5px;
    margin-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    background-repeat: no-repeat;
    background-position: left center;
}
.content {
    height: auto;
    float: left;
    width: 575px;
    background-repeat: repeat;
    background-color: #FFFFFF;
}
.style11 {
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 15px;
    color: #336666;
}
a.link5:link {
    color: #FFFFFF;
}
a.link5:visited {
    color: #FFFFFF;
}
a.link5:hover {
    color: #E9E8C7;
}
a.link5:active {
    color: #E9E8C7;
}

在此处输入图像描述

在此处输入图像描述

4

3 回答 3

0

嘿，我已经尝试过您的代码，请参见：http: //jsbin.com/awonek/1/edit

在我看来很好。

可以编码试试

div#heading{
      margin-bottom:-20px;
}

您在哪些浏览器中尝试过？

添加了一些更改：参见http://jsbin.com/uvurev/1/edit

  <div class="content">
    <div class="heading">
        <a href="default.html" class="link5">Home \\ </a> <a href="current_students.html" class="link5">Current Students \\ </a>
        <h2 class="M_logo_text">FBE Degrees &amp; Electives</h2>
        <span class="style11">FBE Degrees &amp; Other Courses for FBE students including Elective courses</span> 
    </div>
  </div>

CSS

div.heading {
    height: auto;
    width: 525px;
    background-color: #333333;
    font-family:"Courier New", Courier, monospace;
    color: #DBDBDB;
    padding-left: 30px;
    font-weight: bold;
    padding-top: 5px;
    margin-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    background-repeat: no-repeat;
    background-position: left center;
}
.content {
    height: auto;
    float: left;
    width: 575px;
    background-repeat: repeat;
    background-color: #FFFFFF;
}
.style11 {
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 15px;
    color: #336666;
}
a.link5{
    font-size:9px; font-family:'Arial', Gadget, sans-serif
    margin-right: -2px;
    text-decoration: none;
}
a.link5:link {
    color: #FFFFFF;
}
a.link5:visited {
    color: #FFFFFF;
}
a.link5:hover {
    color: #E9E8C7;
}
a.link5:active {
    color: #E9E8C7;
}

/*
added style
*/
b.type1{
    font-size:9px; font-family:'Arial', Gadget, sans-serif
}
h2.M_logo_text{
    font-size: 20px;
    margin:0px;
}
于 2013-04-27T05:02:21.053 回答
0

我认为您首先需要认真整理 HTML 并使用一些更自然的元素。标题应该是某个级别的 H，可能是 h1。段落标签对文本更有意义。如果你这样做，一切都会变得更干净，更容易解决。这是我的建议，可以更改 HTML 并解决您的边距问题。

HTML

<div class="content">
    <div class="heading">
        <p class="crumbs"><a href="default.html" class="link5">Home \\</a>  <a href="current_students.html" class="link5">Current Students \\</a></p>
         <h1>FBE Degrees &amp; Electives</h1>

        <p class="subheading">FBE Degrees &amp; Other Courses for FBE students including Elective courses</p>
    </div>
</div>

CSS

p {
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    color: #336666;
}
a {
    color:#fff;
    text-decoration:none;
}
.heading {
    background:#333333;
    padding:20px; 
}
.heading p {
    margin:0;
    padding:0;
    line-height:10px;
}
h1 {
    margin:0;
    margin-bottom:5px;
    font-family:"Courier New", Courier, monospace;
    font-size:28px;
    line-height:36px;
    color:#DBDBDB;
}

在这里小提琴：http: //jsfiddle.net/yT6h6/6/

它实际上可以更简化（我把你的一些类留在了那里，即使它们没有被使用），但这至少使用起来更整洁。

于 2013-04-27T06:08:06.330 回答
0

试试这个删除 line-height 并添加 display:block

 .style11 { 
   font-size: 10px;
   font-family: Arial, Helvetica, sans-serif;
   display:block;
  color: #336666;
}
于 2013-04-27T04:57:50.267 回答