Question

我试图在我的 HTML 和 CSS 代码中的两个浮动段落之间添加一个空格，但不确定要使用哪些 CSS 元素。我曾尝试使用 margin-left 和 margin-right，但它似乎没有任何好处。对于这两段，我使用浮动元素并排分开。

这是我的 HTML 图像，红色箭头是我想要空白的地方：

HTML 和 CSS 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Borders</title>
    <style>

      body {
        margin: 20px;
      }
      .heading {
        text-align: justify;
      }
      .first-h2 {
         font-size: 24pt;
         width: 100%;
         text-align: center;
         border-top: 8pt solid olive;
         border-bottom: 8pt solid olive;
         line-height: 0.21em;
         margin: 10px 0 20px;
         background-color: olive;
      }
      h2 span {
          background:#ffffff;
          padding:0 10px;
      }
      .second-heading {
        font-size: 50px;
        font-weight: bold;
        margin-top: -20px;
      }
      .second-inner-heading {
        display: inline-block;
        width: 100%;
      }
      .third-heading {
        font-size: 40px;
        font-weight: bold;
        margin-top: -60px;
      }
      .third-inner-heading {
        display: inline-block;
        width: 100%;
      }
      .fourth-heading {
        font-size: 40px;
        font-weight: bold;
        margin-top: -50px;
      }
      .fourth-inner-heading {
        display: inline-block;
        width: 100%;
      }
      .second-h2 {
        font-size: 24pt;
         width: 100%;
         text-align: center;
         border-top: 8pt solid lightblue;
         border-bottom: 8pt solid lightblue;
         line-height: 0.21em;
         margin: 10px 0 20px;
         background-color: lightblue;
      }
      .fifth-heading {
        font-size: 20px;
        font-weight: bold;
        margin-top: -80px;
        text-align: center;
      }
      .fifth-inner-heading {
        display: inline-block;
        width: 100%;
      }
      .sixth-heading {
        font-size: 60px;
        font-weight: bold;
        margin-top: -140px;
        text-align: center;
      }
      .seventh-heading {
        font-size: 40px;
        font-weight: bold;
        margin-top: -90px;
      }
      .seventh-inner-heading {
        display: inline-block;
        width: 100%;
      }
      .third-h2 {
        font-size: 24pt;
         width: 100%;
         text-align: center;
         border-top: 8pt solid brown;
         border-bottom: 8pt solid brown;
         line-height: 0.21em;
         margin: 10px 0 20px;
         background-color: brown;
      }
      .eighth-heading {
        font-size: 40px;
        font-weight: bold;
        margin-top: -110px;
        text-align: center;
      }
      .eighth-inner-heading {
        display: inline-block;
        width: 100%;
      }
      .nineth-heading {
        font-size: 60px;
        font-weight: bold;
        margin-top: -200px;
        text-align: center;
      }
      .nineth-inner-heading {
        display: inline-block;
        width: 100%;
      }
      .tenth-heading {
        font-size: 40px;
        font-weight: bold;
        margin-top: -160px;
      }
      .tenth-inner-heading {
        display: inline-block;
        width: 100%;
      }
      .fourth-h2 {
        font-size: 24pt;
         width: 100%;
         text-align: center;
         border-top: 8pt solid green;
         border-bottom: 8pt solid green;
         line-height: 0.21em;
         margin: 10px 0 20px;
         background-color: green;
      }
      .bottom {
        text-align: justify;
        padding: 0px;
        height: calc(98vh - 190pt);
        position: relative;
        bottom: 0px;
        margin-top: 0px;
      }
      .bottom #sub-right-article {
        float: left;
        width: 50%;
      }
      .bottom #sub-left-article {
        float: right;
        width: 50%;
      }
    </style>
  </head>
  <body>
    <div class = "heading">
      <h2 class = "first-h2"><span><i>CAMERA</i></span></h2>
      <div class="second-heading">
        SALE: LEICA CAMERA MINT CONDITION
        <div class="second-inner-heading"></div>
      </div>
      <div class="third-heading">
        ONLY 7 YEARS OLD PRODUCT
        <div class="third-inner-heading"></div>
      </div>
      <div class="fourth-heading">
        <h2 class = "second-h2"><span>LIMITED EDITION</span></h2>
        <div class="fourth-inner-heading"></div>
      </div>
      <div class="fifth-heading">
        <h3 class = "one-paragraph">43.7 PIXEL CAMERA MOSTLY USED BY PROFESSIONAL PHOTOGRAPHERS AND DAILY USERS</h3>
        <div class="fifth-inner-heading"></div>
      </div>
      <div class="sixth-heading">
        <h1 class ="biggest-heading">LASTS LIFETIME...!</h1>
        <div class="sixth-inner-heading"></div>
      </div>
      <div class="seventh-heading">
        <h2 class = "third-h2"><span><i>AND ALSO</i></span></h2>
        <div class="seventh-inner-heading"></div>
      </div>
      <div class="eighth-heading">
        <h4 class="second-paragraph">IT CAPTURES THE BEST PHOTO IN ANY ATMOSPHERE</h4>
        <div class="eighth-inner-heading"></div>
      </div>
      <div class="nineth-heading">
        <h1 class="third-paragraph">NO MATTER WHAT</h1>
        <div class="nineth-inner-heading"></div>
      </div>
      <div class="tenth-heading">
        <h2 class="fourth-h2"><span>MORE DETAILS BELOW.</span></h2>
        <div class="tenth-inner-heading"></div>
      </div>
    </div>
    <div class="bottom">
      <div id = "sub-right-article">
          <p class = "first"><span>L</span>eica is the first company that created camera. Founded in 1914, Leica is founded by Ernst Leitz based in Germany. Unlike Canon, Nikon and Sony, Leica is manufactured outside of Asia continent. The company prides itself as hand-crafted camera from start to finish. Although each handcrafted camera starts from a high price point, there is a reason why. Each camera gets tested by camera professional specialists to detect any flaws or erros on the camera system.
          </p>
          <p class = "second">Due to the company's pride in complex camera system, Leica is a global company selling across the world. Based in major markets, the flagship stores are usually located in affluent cities, such as Paris, New York, Tokyo, Seoul, and much more.</p>
          <p class = "third">Leica sets 15-20 year goal and hires individuals who are innovative and creative. While the utmost importance of producing camera is precision and durability, Leica holds reputation that the camera will last for decades and carry from one generation and another. Similar to expensive watches and jewelry, Leica is a product that holds value from many years. The company holds strong principle and objective of manufacturing quality product. Not focusing on the revenue, most of the profits earned from the company goes towards researching.</p>
          <footer class = "bottom-left"><p>01 &nbsp; LEICA </p></footer>
        </div>
      <div id = "sub-left-article">
        <p>Leica is divided into 5 different systems: S, SL, M and Q:</p>
        <p>The S-System is made for professional photographers in a medium sized camera. It is easy to handle while providing excellent imaging quality.</p>
        <p>The SL2-System is equipped with what is known as 'L-Mount alliance' that allows companies, such as Panasonic and Sigma to universalize the use of lens. This allows photographers to use variety of different lenses from various companies without a hassle and explore endless ways to capture photos.</p>
        <p>The M-System is equipped with extremely fast rangefinder while being compact. While having minimal functions, the M-System is easy to use but adds more power to contrast of the photo. This allows photographers to focus on the quality of the work.</p>
        <p>The Q-System provides users with excellent performance and connection with external devices. With astonishing 47.3 MP with OLED technology, Q-System is for photosgraphers who need fast and responsive camera.</p>
        <p>Each model has differing functionality; therefore, it is best to do thorough research and choose which one will best suit you.</p>
        <footer class = "bottom-right"><p>J Magazine</p></footer>
      </div>
    </div>
  </body>
</html>

Answer 1

50% 的宽度是导致问题的原因。如果两个 div 各占 50%，则总计为 100%，没有空间留出空间。

为了保持这一点，您可以在两个段落的父 div 中添加左右填充

.sub-right-article,.sub-left-article{
    padding: 10px 20px;
}

另一种方法是使用 flexbox，它比浮动元素更容易设置样式。在父 div（即包含段落 div 的 div）上，添加这些样式。剩余的 10% 未使用的宽度将成为中央空间。然后去掉浮动样式。

.bottom{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.sub-right-article,.sub-left-article{
    width: 45%;
}

Answer 2

如果你想保留你正在使用的浮动元素，你可以简单地使两个“列容器”的宽度变小 (49%) 并在左边的容器中添加一个 2% margin-right（或任何值加起来为 100% 或更少）：

.bottom #sub-right-article {
  float: left;
  width: 49%;
  margin-right: 2%
}

.bottom #sub-left-article {
  float: right;
  width: 49%;
}

（实际上有更好的方法来实现这一点，但正如我所写的：这与您的代码尽可能保持一致）。

这是工作片段：

body {
  margin: 20px;
}

.heading {
  text-align: justify;
}

.first-h2 {
  font-size: 24pt;
  width: 100%;
  text-align: center;
  border-top: 8pt solid olive;
  border-bottom: 8pt solid olive;
  line-height: 0.21em;
  margin: 10px 0 20px;
  background-color: olive;
}

h2 span {
  background: #ffffff;
  padding: 0 10px;
}

.second-heading {
  font-size: 50px;
  font-weight: bold;
  margin-top: -20px;
}

.second-inner-heading {
  display: inline-block;
  width: 100%;
}

.third-heading {
  font-size: 40px;
  font-weight: bold;
  margin-top: -60px;
}

.third-inner-heading {
  display: inline-block;
  width: 100%;
}

.fourth-heading {
  font-size: 40px;
  font-weight: bold;
  margin-top: -50px;
}

.fourth-inner-heading {
  display: inline-block;
  width: 100%;
}

.second-h2 {
  font-size: 24pt;
  width: 100%;
  text-align: center;
  border-top: 8pt solid lightblue;
  border-bottom: 8pt solid lightblue;
  line-height: 0.21em;
  margin: 10px 0 20px;
  background-color: lightblue;
}

.fifth-heading {
  font-size: 20px;
  font-weight: bold;
  margin-top: -80px;
  text-align: center;
}

.fifth-inner-heading {
  display: inline-block;
  width: 100%;
}

.sixth-heading {
  font-size: 60px;
  font-weight: bold;
  margin-top: -140px;
  text-align: center;
}

.seventh-heading {
  font-size: 40px;
  font-weight: bold;
  margin-top: -90px;
}

.seventh-inner-heading {
  display: inline-block;
  width: 100%;
}

.third-h2 {
  font-size: 24pt;
  width: 100%;
  text-align: center;
  border-top: 8pt solid brown;
  border-bottom: 8pt solid brown;
  line-height: 0.21em;
  margin: 10px 0 20px;
  background-color: brown;
}

.eighth-heading {
  font-size: 40px;
  font-weight: bold;
  margin-top: -110px;
  text-align: center;
}

.eighth-inner-heading {
  display: inline-block;
  width: 100%;
}

.nineth-heading {
  font-size: 60px;
  font-weight: bold;
  margin-top: -200px;
  text-align: center;
}

.nineth-inner-heading {
  display: inline-block;
  width: 100%;
}

.tenth-heading {
  font-size: 40px;
  font-weight: bold;
  margin-top: -160px;
}

.tenth-inner-heading {
  display: inline-block;
  width: 100%;
}

.fourth-h2 {
  font-size: 24pt;
  width: 100%;
  text-align: center;
  border-top: 8pt solid green;
  border-bottom: 8pt solid green;
  line-height: 0.21em;
  margin: 10px 0 20px;
  background-color: green;
}

.bottom {
  text-align: justify;
  padding: 0px;
  height: calc(98vh - 190pt);
  position: relative;
  bottom: 0px;
  margin-top: 0px;
}

.bottom #sub-right-article {
  float: left;
  width: 49%;
  margin-right: 2%
}

.bottom #sub-left-article {
  float: right;
  width: 49%;
}

<body>
  <div class="heading">
    <h2 class="first-h2"><span><i>CAMERA</i></span></h2>
    <div class="second-heading">
      SALE: LEICA CAMERA MINT CONDITION
      <div class="second-inner-heading"></div>
    </div>
    <div class="third-heading">
      ONLY 7 YEARS OLD PRODUCT
      <div class="third-inner-heading"></div>
    </div>
    <div class="fourth-heading">
      <h2 class="second-h2"><span>LIMITED EDITION</span></h2>
      <div class="fourth-inner-heading"></div>
    </div>
    <div class="fifth-heading">
      <h3 class="one-paragraph">43.7 PIXEL CAMERA MOSTLY USED BY PROFESSIONAL PHOTOGRAPHERS AND DAILY USERS</h3>
      <div class="fifth-inner-heading"></div>
    </div>
    <div class="sixth-heading">
      <h1 class="biggest-heading">LASTS LIFETIME...!</h1>
      <div class="sixth-inner-heading"></div>
    </div>
    <div class="seventh-heading">
      <h2 class="third-h2"><span><i>AND ALSO</i></span></h2>
      <div class="seventh-inner-heading"></div>
    </div>
    <div class="eighth-heading">
      <h4 class="second-paragraph">IT CAPTURES THE BEST PHOTO IN ANY ATMOSPHERE</h4>
      <div class="eighth-inner-heading"></div>
    </div>
    <div class="nineth-heading">
      <h1 class="third-paragraph">NO MATTER WHAT</h1>
      <div class="nineth-inner-heading"></div>
    </div>
    <div class="tenth-heading">
      <h2 class="fourth-h2"><span>MORE DETAILS BELOW.</span></h2>
      <div class="tenth-inner-heading"></div>
    </div>
  </div>
  <div class="bottom">
    <div id="sub-right-article">
      <p class="first"><span>L</span>eica is the first company that created camera. Founded in 1914, Leica is founded by Ernst Leitz based in Germany. Unlike Canon, Nikon and Sony, Leica is manufactured outside of Asia continent. The company prides itself as hand-crafted
        camera from start to finish. Although each handcrafted camera starts from a high price point, there is a reason why. Each camera gets tested by camera professional specialists to detect any flaws or erros on the camera system.
      </p>
      <p class="second">Due to the company's pride in complex camera system, Leica is a global company selling across the world. Based in major markets, the flagship stores are usually located in affluent cities, such as Paris, New York, Tokyo, Seoul, and much more.</p>
      <p class="third">Leica sets 15-20 year goal and hires individuals who are innovative and creative. While the utmost importance of producing camera is precision and durability, Leica holds reputation that the camera will last for decades and carry from one generation
        and another. Similar to expensive watches and jewelry, Leica is a product that holds value from many years. The company holds strong principle and objective of manufacturing quality product. Not focusing on the revenue, most of the profits earned
        from the company goes towards researching.</p>
      <footer class="bottom-left">
        <p>01 &nbsp; LEICA </p>
      </footer>
    </div>
    <div id="sub-left-article">
      <p>Leica is divided into 5 different systems: S, SL, M and Q:</p>
      <p>The S-System is made for professional photographers in a medium sized camera. It is easy to handle while providing excellent imaging quality.</p>
      <p>The SL2-System is equipped with what is known as 'L-Mount alliance' that allows companies, such as Panasonic and Sigma to universalize the use of lens. This allows photographers to use variety of different lenses from various companies without a
        hassle and explore endless ways to capture photos.</p>
      <p>The M-System is equipped with extremely fast rangefinder while being compact. While having minimal functions, the M-System is easy to use but adds more power to contrast of the photo. This allows photographers to focus on the quality of the work.</p>
      <p>The Q-System provides users with excellent performance and connection with external devices. With astonishing 47.3 MP with OLED technology, Q-System is for photosgraphers who need fast and responsive camera.</p>
      <p>Each model has differing functionality; therefore, it is best to do thorough research and choose which one will best suit you.</p>
      <footer class="bottom-right">
        <p>J Magazine</p>
      </footer>
    </div>
  </div>
</body>

HTML/CSS：如何在两个浮动段落之间添加空格？

2 个答案: