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

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;}

这将解决它。