I'm trying to add a white space between the two float paragraphs in my HTML and CSS code and not sure exactly which CSS elements to use. I have tried using margin-left and margin-right, but it doesn't seem to do any good. For the two paragraphs, I have separated side-by-side by using float element.
Here is the image of my HTML and red arrow is where I want white space:
HTML and CSS Code
<!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>
question from:
https://stackoverflow.com/questions/65928473/html-css-how-do-i-add-white-space-between-the-two-float-paragraphs 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
