Question

我正在创建一个投资组合网站，无论我做什么，我似乎都无法在“给我发送电子邮件”链接和以“作为雇员”开头的段落之间留出很大的空间。

我为此使用了一个模板，但是我尝试过删除边距，填充，ext，但仍然无法腾出该空间。感谢任何帮助。

尝试删除边距，填充和边框。

<!DOCTYPE html>

<html>

<title>Andrew Shults' Portfolio</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>



  <!-- Navbar (sit on top) -->

  <div class="w3-top">

    <div class="w3-bar w3-white w3-wide w3-padding w3-card">

      <a href="#home" class="w3-bar-item w3-button"><b>Andrew Shults'</b> Portfolio</a>

      <!-- Float links to the right. Hide them on small screens -->

      <div class="w3-right w3-hide-small">

        <a href="#projects" class="w3-bar-item w3-button">Projects</a>

        <a href="#about" class="w3-bar-item w3-button">About</a>

        <a href="#contact" class="w3-bar-item w3-button">Contact</a>

      </div>

    </div>

  </div>



  <!-- Header -->

  <header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">

    <img class="w3-image" src="architect.jpg " alt="Architecture" width="1500" height="800">

    <div class="w3-display-middle w3-margin-top w3-center">

      <h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-opacity-min"><b>A</b></span> <span class="w3-hide-small w3-text-light-grey">S</span></h1>

    </div>

  </header>



  <!-- Page content -->

  <div class="w3-content w3-padding" style="max-width:1564px">





    <!--My pic and contact section-->

    <div class="w3-container w3-padding-32" id="about">

      <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">About</h3>

    </div>

    <div class="w3-row-padding">

      <div class="w3-col l3 m6 w3-margin-bottom">

        <img src="Andrewimage.jpg" alt="Blank" style="width:65%">

        <h3>Andrew Shults</h3>

        <p class="w3-opacity">Software Engineer</p>

        <p></p>

        <p></p>

      </div>



    </div>



    <!-- About Section -->

    <div class="w3-container w3-padding-32" id="about">

      <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">&nbsp;</h3>

      <p>As an employee, I am dedicated to providing high quality performance with positive outcomes for my employer. I have held positions of high responsibility where my actions affected the lives and safety of many other individuals. As an adventurous
        individual, I continue to seek new and invigorating challenges. My goals are to continue to grow in the professional environment while seeking to expand my experience in search for a career.</p>

    </div>



    <!-- Project Section -->

    <div class="w3-container w3-padding-32" id="projects">

      <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Projects</h3>

    </div>



    <div class="w3-row-padding">

      <div class="w3-col l3 m6 w3-margin-bottom">

        <div class="w3-display-container">

          <div class="w3-display-topleft w3-black w3-padding"><a href="https://drive.google.com/open?id=1M6O_A_SbDmZjnBdMFpVjDpQSFobdpit5">Alien Shooter Game</a></div>

          <img src="Mortyinvaderpic.png" alt="House" style="width:100%">

        </div>

      </div>

      <div class="w3-col l3 m6 w3-margin-bottom">

        <div class="w3-display-container">

          <div class="w3-display-topleft w3-black w3-padding"><a href="https://drive.google.com/open?id=1szLZIY4JXuyhvov582ztcrzXsBOKtUUz">Horse Betting Game</a></div>

          <img src="Dayattheraces.png" alt="House" style="width:100%">

        </div>

      </div>



    </div>





  </div>



  <!-- Contact Section -->

  <div class="w3-container w3-padding-32" id="contact">

    <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Contact</h3>

    <p>Lets get in touch and talk about your project.</p>

    <form action="/action_page.php" target="_blank">

      <input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">

      <input class="w3-input w3-section w3-border" type="text" placeholder="Email" required name="Email">

      <input class="w3-input w3-section w3-border" type="text" placeholder="Subject" required name="Subject">

      <input class="w3-input w3-section w3-border" type="text" placeholder="Comment" required name="Comment">

      <button class="w3-button w3-black w3-section" type="submit">
    
            <i class="fa fa-paper-plane"></i> SEND MESSAGE
    
          </button>

    </form>

  </div>



  <!-- Image of location/map -->

  <div class="w3-container">

    <img src="map.jpg" class="w3-image" style="width:100%">

  </div>



  <!-- End page content -->

  </div>





  <!-- Footer -->

  <footer class="w3-center w3-black w3-padding-16">

    <p>Andrew Shults</p>

  </footer>



</body>

</html>

Answer 1

您的<h3>看上去很空，占用了很多空间，并且在about部分增加了填充。试试这个：

<!DOCTYPE html>

<html>

<title>Andrew Shults' Portfolio</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>



  <!-- Navbar (sit on top) -->

  <div class="w3-top">

    <div class="w3-bar w3-white w3-wide w3-padding w3-card">

      <a href="#home" class="w3-bar-item w3-button"><b>Andrew Shults'</b> Portfolio</a>

      <!-- Float links to the right. Hide them on small screens -->

      <div class="w3-right w3-hide-small">

        <a href="#projects" class="w3-bar-item w3-button">Projects</a>

        <a href="#about" class="w3-bar-item w3-button">About</a>

        <a href="#contact" class="w3-bar-item w3-button">Contact</a>

      </div>

    </div>

  </div>



  <!-- Header -->

  <header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">

    <img class="w3-image" src="architect.jpg " alt="Architecture" width="1500" height="800">

    <div class="w3-display-middle w3-margin-top w3-center">

      <h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-opacity-min"><b>A</b></span> <span class="w3-hide-small w3-text-light-grey">S</span></h1>

    </div>

  </header>



  <!-- Page content -->

  <div class="w3-content w3-padding" style="max-width:1564px">





    <!--My pic and contact section-->

    <div class="w3-container w3-padding-32" id="about">

      <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">About</h3>

    </div>

    <div class="w3-row-padding">

      <div class="w3-col l3 m6 w3-margin-bottom">

        <img src="Andrewimage.jpg" alt="Blank" style="width:65%">

        <h3>Andrew Shults</h3>

        <p class="w3-opacity">Software Engineer</p>

        <p></p>

        <p></p>

      </div>



    </div>



    <!-- About Section -->

    <div class="w3-container w3-padding-32" style="padding-top:0!important;" id="about">

      <!--h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">&nbsp;</h3-->

      <p>As an employee, I am dedicated to providing high-quality performance with positive outcomes for my employer. I have held positions of high responsibility where my actions affected the lives and safety of many other individuals. As an adventurous
        individual, I continue to seek new and invigorating challenges. My goals are to continue to grow in the professional environment while seeking to expand my experience in the search for a career.</p>

    </div>



    <!-- Project Section -->

    <div class="w3-container w3-padding-32" id="projects">

      <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Projects</h3>

    </div>



    <div class="w3-row-padding">

      <div class="w3-col l3 m6 w3-margin-bottom">

        <div class="w3-display-container">

          <div class="w3-display-topleft w3-black w3-padding"><a href="https://drive.google.com/open?id=1M6O_A_SbDmZjnBdMFpVjDpQSFobdpit5">Alien Shooter Game</a></div>

          <img src="Mortyinvaderpic.png" alt="House" style="width:100%">

        </div>

      </div>

      <div class="w3-col l3 m6 w3-margin-bottom">

        <div class="w3-display-container">

          <div class="w3-display-topleft w3-black w3-padding"><a href="https://drive.google.com/open?id=1szLZIY4JXuyhvov582ztcrzXsBOKtUUz">Horse Betting Game</a></div>

          <img src="Dayattheraces.png" alt="House" style="width:100%">

        </div>

      </div>



    </div>





  </div>



  <!-- Contact Section -->

  <div class="w3-container w3-padding-32" id="contact">

    <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Contact</h3>

    <p>Lets get in touch and talk about your project.</p>

    <form action="/action_page.php" target="_blank">

      <input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">

      <input class="w3-input w3-section w3-border" type="text" placeholder="Email" required name="Email">

      <input class="w3-input w3-section w3-border" type="text" placeholder="Subject" required name="Subject">

      <input class="w3-input w3-section w3-border" type="text" placeholder="Comment" required name="Comment">

      <button class="w3-button w3-black w3-section" type="submit">
    
            <i class="fa fa-paper-plane"></i> SEND MESSAGE
    
          </button>

    </form>

  </div>



  <!-- Image of location/map -->

  <div class="w3-container">

    <img src="map.jpg" class="w3-image" style="width:100%">

  </div>



  <!-- End page content -->

  </div>





  <!-- Footer -->

  <footer class="w3-center w3-black w3-padding-16">

    <p>Andrew Shults</p>

  </footer>



</body>

</html>

Answer 2

<!DOCTYPE html>

<html>

<title>Andrew Shults' Portfolio</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body>



  <!-- Navbar (sit on top) -->

  <div class="w3-top">

    <div class="w3-bar w3-white w3-wide w3-padding w3-card">

      <a href="#home" class="w3-bar-item w3-button"><b>Andrew Shults'</b> Portfolio</a>

      <!-- Float links to the right. Hide them on small screens -->

      <div class="w3-right w3-hide-small">

        <a href="#projects" class="w3-bar-item w3-button">Projects</a>

        <a href="#about" class="w3-bar-item w3-button">About</a>

        <a href="#contact" class="w3-bar-item w3-button">Contact</a>

      </div>

    </div>

  </div>



  <!-- Header -->

  <header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">

    <img class="w3-image" src="architect.jpg " alt="Architecture" width="1500" height="800">

    <div class="w3-display-middle w3-margin-top w3-center">

      <h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-opacity-min"><b>A</b></span> <span class="w3-hide-small w3-text-light-grey">S</span></h1>

    </div>

  </header>



  <!-- Page content -->

  <div class="w3-content w3-padding" style="max-width:1564px">





    <!--My pic and contact section-->

    <div class="w3-container w3-padding-32" id="about">

      <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">About</h3>

    </div>

    <div class="w3-row-padding">

      <div class="w3-col l3 m6 w3-margin-bottom">

        <img src="Andrewimage.jpg" alt="Blank" style="width:65%">

        <h3>Andrew Shults</h3>

        <p class="w3-opacity">Software Engineer</p>

        <p></p>

        <p></p>

      </div>



    </div>



    <!-- About Section -->

    <div class="w3-container" id="about">

     
      <p>As an employee, I am dedicated to providing high quality performance with positive outcomes for my employer. I have held positions of high responsibility where my actions affected the lives and safety of many other individuals. As an adventurous
        individual, I continue to seek new and invigorating challenges. My goals are to continue to grow in the professional environment while seeking to expand my experience in search for a career.</p>

    </div>



    <!-- Project Section -->

    <div class="w3-container w3-padding-32" id="projects">

      <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Projects</h3>

    </div>



    <div class="w3-row-padding">

      <div class="w3-col l3 m6 w3-margin-bottom">

        <div class="w3-display-container">

          <div class="w3-display-topleft w3-black w3-padding"><a href="https://drive.google.com/open?id=1M6O_A_SbDmZjnBdMFpVjDpQSFobdpit5">Alien Shooter Game</a></div>

          <img src="Mortyinvaderpic.png" alt="House" style="width:100%">

        </div>

      </div>

      <div class="w3-col l3 m6 w3-margin-bottom">

        <div class="w3-display-container">

          <div class="w3-display-topleft w3-black w3-padding"><a href="https://drive.google.com/open?id=1szLZIY4JXuyhvov582ztcrzXsBOKtUUz">Horse Betting Game</a></div>

          <img src="Dayattheraces.png" alt="House" style="width:100%">

        </div>

      </div>



    </div>





  </div>



  <!-- Contact Section -->

  <div class="w3-container w3-padding-32" id="contact">

    <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Contact</h3>

    <p>Lets get in touch and talk about your project.</p>

    <form action="/action_page.php" target="_blank">

      <input class="w3-input w3-border" type="text" placeholder="Name" required name="Name">

      <input class="w3-input w3-section w3-border" type="text" placeholder="Email" required name="Email">

      <input class="w3-input w3-section w3-border" type="text" placeholder="Subject" required name="Subject">

      <input class="w3-input w3-section w3-border" type="text" placeholder="Comment" required name="Comment">

      <button class="w3-button w3-black w3-section" type="submit">
    
            <i class="fa fa-paper-plane"></i> SEND MESSAGE
    
          </button>

    </form>

  </div>



  <!-- Image of location/map -->

  <div class="w3-container">

    <img src="map.jpg" class="w3-image" style="width:100%">

  </div>



  <!-- End page content -->

  </div>





  <!-- Footer -->

  <footer class="w3-center w3-black w3-padding-16">

    <p>Andrew Shults</p>

  </footer>



</body>

</html>

Answer 3

您的h3元素正在占用空间。

删除它肯定会有助于缩小差距。

如果您以前没有使用过此工具，请使用Google chrome dev tool帮助您检查和可视化这些块。

Answer 4

删除“关于”部分下的以下代码行：

<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">&nbsp;</h3>

更改：

<div class="w3-container w3-padding-32" id="about">

收件人：

<div class="w3-container" id="about">

学习创建自己的CSS。

无论我如何尝试，我都无法摆脱这个空间

4 个答案: