【发布时间】：2021-01-28 06:50:50
【问题描述】：
我试图在我的 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 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>
【问题讨论】：
-
使它们每个小于 50%。问题解决了。