-1

I'm trying to learn HTML and CSS and trying to figure out how to line up boxes next to each other. I've managed to fit two boxes with "width: 50%;" next to each other but there is still a white space between them and I'm wondering what this white space is and how to get rid of it. Here is the link to the code at CodePen: Boxes

* {
  margin: 0;
  padding: 0;
}

.box {
  box-sizing: border-box;
  width: 50%;
  height: 200px;
  padding: 15px;
  background-color: #127202;
  display: inline-block;
  border: 5px solid;
  border-color: #000000;
}

section {
  white-space: nowrap;
}
<main>
  <section>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </section>
</main>
<footer>
</footer>
j08691
  • 204,283
  • 31
  • 260
  • 272
CompleteNooberino
  • 3
  • 2
  • The whitespace (roughly 4px) is a result of the inline-block added to the box class - as mentioned below you can change the display of the section to flex - but in that case also remove the inline-block as it will do nothing :) – Jakob E Jun 27 '22 at 13:15

3 Answers3

0

So, whitespace in your actual HTML code is (by default) interpreted as text (although multiple white space in a row does get condensed into one singular space, as is happening here). You can tell that this is the case, because if you hover over the gap your cursor changes to the I-beam, and you can actually select the space.

One solution would just be to have no whitespace between your two div tags, e.g.

</div>

<div>

would become

</div><div>

Another would be to lay out your divs using the css flexbox, which avoids this issue entirely (and still allows your HTML markup to look nice!)

Toastrackenigma
  • 7,604
  • 4
  • 45
  • 55
-1

* {
  margin: 0;
  padding: 0;
}

.box {
  box-sizing: border-box;
  width: 50%;
  height: 200px;
  padding: 15px;
  background-color: #127202;
  display: inline-block;
  border: 5px solid;
  border-color: #000000;
}

section {
  white-space: nowrap;
  display:flex;
}
<main>
  <section>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </section>
</main>
<footer>
</footer>

Just add display:flex; in your "section" styling.

hugomztl
  • 88
  • 11
-1

* {
  margin: 0;
  padding: 0;
}

.box {
  box-sizing: border-box;
  width: 50%;
  height: 200px;
  padding: 15px;
  background-color: #127202;
  display: inline-block;
  border: 5px solid;
  border-color: #000000;
  float:left
}

section {
  white-space: nowrap;
}
<main>
  <section>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </section>
</main>
<footer>
</footer>
Amit
  • 823
  • 7
  • 13