I can't place two elements in line with display:inline-block. How can I solve this?

Question

For example, I have this code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.block_1 {
  display: inline-block;
  width: 50%;
  background: purple;
  height: 100%;
}

.block_2 {
  display: inline-block;
  width: 50%;
  background: pink;
  height: 100%;
}

html, body {
  height: 100%;
}

<div class="block_1"></div>
<div class="block_2"></div>

My elements still behave like blocks. Why? What can explain this problem?

the duplicate should tell you why 50% + 50% is also comming with extra pixels standing in between your 2 boxes (white-space from the code treated alike white-space in between 2 img or 2 words ) ;) — G-Cyrillus, Nov 26 '20 at 20:48

score 0 · Answer 1 · answered Nov 26 '20 at 20:48

remove inline-block and wrap them in an element with display: flex;. In this case body { display: flex; }

body {
  display: flex;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.block_1 {
  width: 50%;
  background: purple;
  height: 100%;
}

.block_2 {
  width: 50%;
  background: pink;
  height: 100%;
}

html, body {
  height: 100%;
}

<div class="block_1"></div>
<div class="block_2"></div>

I can't place two elements in line with display:inline-block. How can I solve this?

1 Answers1