html中detail box按钮下方有一个空格

Question

I set the width of the parent element as 100%. Then, I decide the width of the two elements embraced by the parent one is at 50% each After that, I set the background color for the first one as white, and the other one as black. There is one weird white space under the first element. However I modified the size of the first box, it still remains there. Does anyone know how to remove that one?

 .container { width: 100%; } .infoBox { width: 100%; height: 400px; margin: 0; } .detailBox { width: 50%; margin: 0; padding: 0; float: left; font-size: 16pt; background: black; } .detailBox2 { width: 50%; margin: 0; padding: 0; float: right; font-size: 16pt; background: white; } .post { width: 90%; padding: 0 5%; } .detailBox .post { color: white; } .detailBox2 .post { color: black; } .post h1 { margin: 2% 0; } .detailBox button { padding: 4.65% 12%; background: white; border-radius: 30px; color: #688dc1; font-size: 10pt; border: none; border-color: #688dc1; letter-spacing: 0.04em; text-align: center; font-weight: bold; } .detailBox2 button { padding: 4.65% 12%; background: white; border-radius: 30px; color: #688dc1; font-size: 10pt; border-color: #688dc1; letter-spacing: 0.04em; text-align: center; font-weight: bold; }

 <div class="container"> <section id="infoBox"> <section class="detailBox"> <div class="post"> <h1>About me</h1> <p>I studied editiorial, graphic, Western Art, web design and developement at college in Canada. After working at an American and Canadian companies, I finally established my own design comapny, JoeyNamiki Design. I discovered that I want to create a large range of designs. In addition, I also want to develop as many websites as I can. </p> <button>Learn More</button> </div> </section> <section class="detailBox2"> <div class="post"> <h1>About you</h1> <p>If you are looking for a web agency that can redesign and create your company's website with a well-ordered process, you should ask me what you want to do through email. With a clear menu, you can immediately tell how much are the costs for your website and other options such as graphic, logo, poster designs. Let's talk together about your future website!</p> <button>Learn More</button> </div> </section> </section>

Answer 1

Change width as i changed  width: 30%;

Try below snippet.

 .container{ width: 100%; } .infoBox { width: 100%; height: 400px; margin: 0; } .detailBox { width: 30%; margin: 0; padding: 0; float: left; font-size: 16pt; background: black; } .detailBox2 { width: 50%; margin: 0; padding: 0; float: right; font-size: 16pt; background: white; } .post { width: 90%; padding: 0 5%; } .detailBox .post { color: white; } .detailBox2 .post { color: black; } .post h1{ margin: 2% 0; } .detailBox button { padding: 4.65% 12%; background: white; border-radius: 30px; color: #688dc1; font-size: 10pt; border: none; border-color: #688dc1; letter-spacing: 0.04em; text-align: center; font-weight: bold; } .detailBox2 button { padding: 4.65% 12%; background: white; border-radius: 30px; color: #688dc1; font-size: 10pt; border-color: #688dc1; letter-spacing: 0.04em; text-align: center; font-weight: bold; }

 <div class="container"> <section id="infoBox"> <section class="detailBox"> <div class="post"> <h1>About me</h1> <p>I studied editiorial, graphic, Western Art, web design and developement at college in Canada. After working at an American and Canadian companies, I finally established my own design comapny, JoeyNamiki Design. I discovered that I want to create a large range of designs. In addition, I also want to develop as many websites as I can. </p> <button>Learn More</button> </div> </section> <section class="detailBox2"> <div class="post"> <h1>About you</h1> <p>If you are looking for a web agency that can redesign and create your company's website with a well-ordered process, you should ask me what you want to do through email. With a clear menu, you can immediately tell how much are the costs for your website and other options such as graphic, logo, poster designs. Let's talk together about your future website!</p> <button>Learn More</button> </div> </section> </section>