填充 HTML/CSS 中的额外空间

Question

How do I fill that circled space? I want to know how to fill the rest of the blue area with white background-color.

I tried increasing the padding, but that moved the price lower and lower and to the left a little each time I increased the padding.

My HTML looks like this..

 section { background-color: white; } #repair-tagline h1 { background-color: white; font-family: 'Open Sans Condensed', sans-serif; letter-spacing: 0.2rem; font-size: 3rem; text-align: center; padding: 40px 0 40px 0; } .repair-option { background-color: rgb(0, 0, 77); width: 80%; padding: 50px 50px 50px 50px; margin: 0px auto 50px auto; } .repair-type, .repair-price { display: inline-block; color: white; } .repair-type { font-size: 2rem; } .repair-price { float: right; background-color: white; border: 1px solid black; color: black; font-size: 2rem; }

 <section> <div class="repair"> <div id="repair-tagline"> <h1>Choose Your Vacuum Cleaner Repair Option:</h1> </div> <div class="repair-option"> <div class="repair-type"> <h1>Belt Repair</h1> </div> <div class="repair-price"> <h1>$10.00</h1> </div> </div> <div class="repair-option"> <div class="repair-type"> <h1>Brush-Roll Repair</h1> </div> <div class="repair-price"> <h1>$20.00</h1> </div> </div> </div> </section>

Answer 1

Remove the padding from the class of repair-option and add individual paddings to the 2 child divs ( repair-type and repair-price ). That way, each of those had individual paddings which means the background-color corresponds to the div.

The padding for .repair-price may look weird, but I just did that because it wasn't lining up. You can change all the paddings to how you wish.

 section { background-color: white; } #repair-tagline h1 { background-color: white; font-family: 'Open Sans Condensed', sans-serif; letter-spacing: 0.2rem; font-size: 3rem; text-align: center; padding: 40px 0 40px 0; } .repair-option { background-color: rgb(0, 0, 77); width: 80%; padding: 0px; margin: 0px auto 50px auto; } .repair-type, .repair-price { display: inline-block; color: white; } .repair-type { font-size: 2rem; padding: 10px; } .repair-price { float: right; background-color: white; border: 1px solid black; color: black; font-size: 2rem; padding: 10px 0px 8px 0px; }

 <section> <div class="repair"> <div id="repair-tagline"> <h1>Choose Your Vacuum Cleaner Repair Option:</h1> </div> <div class="repair-option"> <div class="repair-type"> <h1>Belt Repair</h1> </div> <div class="repair-price"> <h1>$10.00</h1> </div> </div> <div class="repair-option"> <div class="repair-type"> <h1>Brush-Roll Repair</h1> </div> <div class="repair-price"> <h1>$20.00</h1> </div> </div> </div> </section>