Question

我试图找出为什么我不能填补这个位置，尽管尝试了许多我无法弄清楚如何解决它的事情。我尝试填充顶部，但无济于事。我提供了下面的代码以及我正在谈论的空间的图片。在图片中，标题2和灰色区域之间有一个空白区域，其中有一个简短的摘要。我尝试过填充并增加背景颜色的高度，但它似乎不起作用。提前感谢您阅读本文，我真的非常感谢您花时间帮我解决这个问题。

  $(document).ready(function()){
                        $("figure img + figcaption").prev().addClass('hasCaption');
                        
                        
                       
                        
                        });

 .body{
        margin: 0px;
        
      }
      .homeButton{
        width: 40px;
        
      }
      #MidPort{
        background-image: url("http://www.geocities.ws/spahealthcare/pic/dark-green-home-button.png");
        background-size:cover;
        position:absolute;
        margin-left:1565px;
        bottom:10px;
      
      }
      .topnav{
        font-size: 20px;
        font-family: Times New Roman;
        position:fixed;
        top 0;
        width:100%;
      }
      #bg2{
        background-color:red;
        
      }  
      
       ul{
         list-style-type:none;
         margin:0;
         padding:0;
         overflow: hidden;
         background-color: #333
     }
      li{
        float:left;
        border-right:1px solid #bbb;
        
        
      }    
       li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover {
        background-color: red;
    }
            
      .active{
        background-color:#4CAF50;
        }
       li a:hover:not(.active) 
      {
        background-color: #111; 
       }
      li:last-child{
        border-right:none;
        
      }
      #margintop1{
        margin-top: .5cm;
        font-family: Gadget;
        
    }
      .jumbotron{
        height:175px;
        background-color:#808080;
       
      }
    
      hr.style17 {
    	border-top: 1px solid #8c8b8b;
    	text-align: center;
      }
      hr.style17:after {
    	content: '§';
    	display: inline-block;
    	position: relative;
    	top: -14px;
    	padding: 0 10px;
    	background: #f0f0f0;
    	color: #8c8b8b;
    	font-size: 18px;
    	-webkit-transform: rotate(60deg);
    	-moz-transform: rotate(60deg);
    	transform: rotate(60deg);
    }
      img.hasCaption {
      padding-bottom: 50px;
    }
    
    figcaption {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 16px;
      background-color: white;
      text-align: center;
      color: blue;
      font-family: 'Reenie Beanie', cursive;
      font-size: 30px;
      padding: 10px;
    }
      figure {
      display: inline-block;
      position: relative;
      left: 0;
      -moz-transform:rotate(-5deg);
      -webkit-transform:rotate(-5deg);
      -ms-transform:rotate(-5deg);
      transform:rotate(-5deg);
    }
    
    img {
      border-color: white;
      border-width: 15px;
      -moz-border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
      border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
      border-style: solid;
      margin: auto;
    }
      #imgR{
        margin-left:1285px;
        height:400px;
        
        
      }
     
      font{
        font-family:Gadget;
       }
      section{
        background-color:#00FFFF;
        margin-bottom:10cm;
        font-family:Gadget;
      }
      
        
      }

    
    <!-- Check to see if the navigation bar remains at the bottom if I use the nav class instead of ul. If not, revert back to ul for when the user scrolls down-->
    
    
    
    <div>
       <header>
    <!--<div class="container">-->
     
      
      
          <h2 class="topnav" id="cs2">
             <ul>
                <li><a class="active"                                             href="/home">Home</a></li>                                               
            <li><a  href="/About me">About Me</a></li>
            <li><a href="/Contact">Contact</a></li>
            <li id="MidPort"><a href="/Home"></a></li>
           </ul>
         </h2>
       </header>
    </div>
      <body> 
        <div class="intro-text">  
          <div class="jumbotron">
             <div> 
              <p id="margintop1"style="margin-right:200px;">
                <font color="white">Front-End Developer and Economist, with experience in project management, machine learning, and leadership roles; devoted to functional programming and analyzing mathematical models to solve emerging economic problems
                </font>
              </p>
              <hr class="style17"/>
             
             </div>   
           <figure>
                <img src="http://i.maniadb.com/images/artist/116/116122.jpg" id="imgR">
              
            </figure>
          </div>
        </div>
      <div id="midSec">    
          <section>
            <h2>
              <center>
                 <font color="#2F4F4F" size="20">
                Portfolio
                 </font>      
              </center>  
              </h2>
             </section>
          
         </div>
     </body>

<!--setup a home button at the bottom-->




[![Space is in between Portfolio and the brief summary][1]][1]

Answer 1

您在代码中使用带有边距的h2。

h2{margin: 0;}

这将解决它。

Answer 2

默认情况下，

h2有一个上限。删除它。

另外，您的HTML不正确。（这就是为什么我发布这个答案，向他解释他的HTML中的问题）

最大的问题是您在ul内嵌套h2。这种做法无效。

正如文件中所述

大多数被归类为短语内容的元素只能包含自身被归类为短语内容的元素，而不是任何流内容。

h1，h2等标题代码正在查看内容，ul是flow content。因此，您无法将ul置于h2

之内

您可以在此处查看HTML＆gt; HTML validator并查看此处的文档＆gt; documentation

第二个问题是您撰写<li><a href="/About me">About Me</li></a>

所以你首先打开li，然后a，但你首先关闭li然后关闭a。您需要在关闭li之前关闭a。 a是li的孩子。正确的形式：

<li><a href="/About me">About Me</a></li>

另一个问题正在使用HTML5中不再支持的标记。 font，center。（也不支持使用size）您可以使用内联样式（例如<h2 style="font-size:10px;text-align:center">），也可以单独使用CSS样式。

这些只是我从第一次查看代码时看到的问题

Answer 3

h2{margin-top:0}

将解决问题

填充不起作用时如何填充空格

3 个答案: