HTML和CSS间距

Question

这两个区域之间的间距有问题（见图）。如何缩小白色部分中文本之间的间隙，或缩小间距？我不确定如何在外面保留白色空间的同时做到这一点。

* {
  margin: 0;
  padding: 0;
}

body {
  height: 90vh;
}

#caption {
  display: block
}

#tourdefrance {
  vertical-align: bottom;
  display: block;
  text-align: center;
  height: 10px;
  float: left;
}

p {
  text-indent: 50px;
  line-height: 1.0em;
  height: 1.5;
}

#tripinfo {
  background-color: #bbccdd;
  float: right;
  width: 20%;
  height: 80vh;
}

#banner {
  width: 100%;
}

nav {
  list-style-type: none;
  text-align: center;
  text-decoration: none;
}

nav li {
  display: inline;
}

#container {
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 1.5%;
  margin-bottom: 5%;
}

nav a {
  border: 2px solid black;
  padding: 10px;
  border-radius: 0px 10px 0px 10px;
  text-decoration: none;
  background-color: #bbccdd;
  color: white;
  font-family: verdana;
  font-weight: bold;
}

a:hover {
  color: black;
}

#aboutus {
  float: left;
  width: 70%;
  height: 80vh;
}

h1 {
  position: absolute;
  font-family: Verdana;
  color: White;
  font-size: 3.5em;
  text-indent: 25%;
  height: 30%;
  bottom: 60%;
}

h3 {
  font-family: Verdana;
}

p {
  font-family: Verdana;
  font-size: 1.0em;
  width: 90%;
  line-height: 1.25em;
}

footer {
  text-align: center;
  font-weight: bold;
  clear: both;
  border-top: 2px solid black;
  font-family: Verdana;
}

#cycle {
  float: left;
}

<div id="container">
  <section id="header">
    <header>
      <nav>
        <ul>
          <li><a href="aboutus.html">About us</a></li>
          <li><a href="a" title="Ask Us">Ask Us</a></li>
          <li><a href="a" title="Destination">Destination</a></li>
          <li><a href="a" title="FAQ">FAQ</a></li>
          <li><a href="a" title="Reviews">Reviews</a></li>
          <li><a href="a" title="Seminars">Reviews</a></li>
          <li><a href="a" title="Trip Prep">Trip Prep</a></li>
        </ul>
      </nav>
      <h1>Cycling Tours</h1>
      <figure>
        <img id="banner" src="images/cycling_banner.png" alt="cycling">
      </figure>
    </header>
  </section>
  <section id="aboutus">
    <h3> About Us </h3>
    <p> Cycling Tours began when Bill Randolf and three of his friends from high school began to cycle regularly every weekend. Their routine cycling evolved into frequent cycling trips and they cultivated a following. Before they knew it, other friends and
      family members asked to join them in their trips.</p>
    <br>
    <div class="tourdefrance">
      <img id="cycle" src="images/cyclists.jpeg" alt="cyclists">
      <span class="caption"></span>
    </div>
    <span id="p1">
                    <p>Cyclists are enthusiastic and very health and environmentally conscious. For this reason, all of our trips include vegan options for meals, recycled paper food serving utensils, and hybrid vehicles to escort the cyclists.</p>
                    <br>
                 </span>
    <span id="p2">
                    <p>Our trips are suitable for solo cyclists, couples, friends, and families. We provide camping accommodation for off-road cycling trips, and shared accommodations for couples, friends and families. If you are travelling solo, we can match you with someone for shared accommodations. You can also pay the single-supplement if you wish to have a room of your own.</p>
                    <br>
                 </span>
    <p>After you've completed one trip with us, we're sure you'll want to do more. Over 80% of our customers have been on at least one prior trip with us. We're always looking for new ideas for trips, so please let us know if you have any ideas!</p>
  </section>
  <section id="tripinfo">
    <h3>Trip<br> Information</h3>
    <br>
    <p>Our trips are planned carefully to provide the best experience for cyclists.</p>
    <br>
    <p>Types of trips include self-contained camping tours, inn-to-inn tours and other adventure cycling.</p>
  </section>
  <footer>
    Cycling Tours&#10043 P.O. Box 4455&#10043 Brantford,ON&#10043 N3T 2J0 <br> Image Credit: http://www.bikelink.com/images/banner01.jpg
  </footer>
</div>

Answer 1

根据您需要关闭空间的位置，因为您的描述没有很好地描述。在CSS文件中试试这个。

#idName{

margin-bottom:0px;

}

Answer 2

您可以删除#aboutus部分中段落元素的宽度约束：

#aboutus p {
  width: 100%;
}

并且可选地增加#tripinfo元素的大小：

#tripinfo {
  ...
  width: 30%;
  ...
 }

请参阅下面的完整演示：

* {
  margin: 0;
  padding: 0;
}

body {
  height: 90vh;
}

#caption {
  display: block
}

#tourdefrance {
  vertical-align: bottom;
  display: block;
  text-align: center;
  height: 10px;
  float: left;
}

p {
  text-indent: 50px;
  line-height: 1.0em;
  height: 1.5;
}

#tripinfo {
  background-color: #bbccdd;
  float: right;
  width: 30%;
  height: 80vh;
}

#banner {
  width: 100%;
}

nav {
  list-style-type: none;
  text-align: center;
  text-decoration: none;
}

nav li {
  display: inline;
}

#container {
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 1.5%;
  margin-bottom: 5%;
}

nav a {
  border: 2px solid black;
  padding: 10px;
  border-radius: 0px 10px 0px 10px;
  text-decoration: none;
  background-color: #bbccdd;
  color: white;
  font-family: verdana;
  font-weight: bold;
}

a:hover {
  color: black;
}

#aboutus {
  float: left;
  width: 70%;
  height: 80vh;
}

h1 {
  position: absolute;
  font-family: Verdana;
  color: White;
  font-size: 3.5em;
  text-indent: 25%;
  height: 30%;
  bottom: 60%;
}

h3 {
  font-family: Verdana;
}

p {
  font-family: Verdana;
  font-size: 1.0em;
  width: 90%;
  line-height: 1.25em;
}

footer {
  text-align: center;
  font-weight: bold;
  clear: both;
  border-top: 2px solid black;
  font-family: Verdana;
}

#cycle {
  float: left;
}

#aboutus p {
  width: 100%;
}

<div id="container">
  <section id="header">
    <header>
      <nav>
        <ul>
          <li><a href="aboutus.html">About us</a></li>
          <li><a href="a" title="Ask Us">Ask Us</a></li>
          <li><a href="a" title="Destination">Destination</a></li>
          <li><a href="a" title="FAQ">FAQ</a></li>
          <li><a href="a" title="Reviews">Reviews</a></li>
          <li><a href="a" title="Seminars">Reviews</a></li>
          <li><a href="a" title="Trip Prep">Trip Prep</a></li>
        </ul>
      </nav>
      <h1>Cycling Tours</h1>
      <figure>
        <img id="banner" src="images/cycling_banner.png" alt="cycling">
      </figure>
    </header>
  </section>
  <section id="aboutus">
    <h3> About Us </h3>
    <p> Cycling Tours began when Bill Randolf and three of his friends from high school began to cycle regularly every weekend. Their routine cycling evolved into frequent cycling trips and they cultivated a following. Before they knew it, other friends and
      family members asked to join them in their trips.</p>
    <br>
    <div class="tourdefrance">
      <img id="cycle" src="images/cyclists.jpeg" alt="cyclists">
      <span class="caption"></span>
    </div>
    <span id="p1">
                    <p>Cyclists are enthusiastic and very health and environmentally conscious. For this reason, all of our trips include vegan options for meals, recycled paper food serving utensils, and hybrid vehicles to escort the cyclists.</p>
                    <br>
                 </span>
    <span id="p2">
                    <p>Our trips are suitable for solo cyclists, couples, friends, and families. We provide camping accommodation for off-road cycling trips, and shared accommodations for couples, friends and families. If you are travelling solo, we can match you with someone for shared accommodations. You can also pay the single-supplement if you wish to have a room of your own.</p>
                    <br>
                 </span>
    <p>After you've completed one trip with us, we're sure you'll want to do more. Over 80% of our customers have been on at least one prior trip with us. We're always looking for new ideas for trips, so please let us know if you have any ideas!</p>
  </section>
  <section id="tripinfo">
    <h3>Trip<br> Information</h3>
    <br>
    <p>Our trips are planned carefully to provide the best experience for cyclists.</p>
    <br>
    <p>Types of trips include self-contained camping tours, inn-to-inn tours and other adventure cycling.</p>
  </section>
  <footer>
    Cycling Tours&#10043 P.O. Box 4455&#10043 Brantford,ON&#10043 N3T 2J0 <br> Image Credit: http://www.bikelink.com/images/banner01.jpg
  </footer>
</div>