'CSS remove the gap on inline-block elements between two child elements [duplicate]

I just can't find the fix for this problem.

Here is the fiddle: https://jsfiddle.net/qog59a6b/

Here is the code:

div {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  margin: 1%;
  border: 1px solid red;
  padding: 10px;
  box-sizing: border-box;
}

<div>Box 1 - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

<div>Box 2 - text text</div>

<div>Box 3 - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

<div>Box 4 - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

<div>Box 5 - There should be no margin between this box and the box number 2. This box should come just below box 2.</div>

<div>Box 6 - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

How can I remove the space between box 2 and box 5? I need box 5 to go up, just below box 2.

What's the CSS solution for this?

css vertical-alignment

Solution 1:^[1]

One solution would be to add display: flex and flex-wrap: wrap to the parent element (<body> in your example). From here you can add flex: 1 0 31% to the div elements, as seen below:

div {
  display: inline-block;
  vertical-align: top;
  width: 31%;
  margin: 1%;
  border: 1px solid red;
  padding: 10px;
  box-sizing: border-box;
  flex: 1 0 31%;
}

/* The parent */
body {
  display: flex;
  flex-wrap: wrap;
}

<div>Box 1 - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

<div>Box 2 - text text</div>

<div>Box 3 - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

<div>Box 4 - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

<div>Box 5 - There should be no margin between this box and the box number 2. This box should come just below box 2.</div>

<div>Box 6 - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

Note that the 31% is relative to the width.

Solution 2:^[2]

Specifying margin: 1%; declares margin on all four sides of the div. Instead use margin: 0% 1%; which only specifies 1% margin on the left and right.

Edit ~ use vertical-align: bottom; on the second div.

.contain>div {
  display: inline-block;
  vertical-align: top;
  width: calc(100%/3);
  margin: 1%;
  border: 1px solid red;
  padding: 10px;
  box-sizing: border-box;
  height: max-content;
}

.contain>div:nth-child(2) {
  margin-bottom: 0;
}

.contain {
  display: flex;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.contain>div:nth-child(2) {
  margin-bottom: auto;
}

.contain:nth-child(2)>div:nth-child(2) {
  position: relative;
  bottom: 70px;
}

@media only screen and (max-width: 845px) {
  .contain:nth-child(2)>div:nth-child(2) {
    position: relative;
    bottom: 115px;
  }
}
@media only screen and (max-width: 698px) {
  .contain:nth-child(2)>div:nth-child(2) {
    position: relative;
    bottom: 150px;
  }
}

<div class="wrapper">
  <div class="contain">
    <div>Box 1 - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
    <div>Box 2 - text text</div>
    <div>Box 3 - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  </div>
  <div class="contain">
    <div>Box 4 - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
    <div>Box 5 - There should be no margin between this box and the box number 2. This box should come just below box 2.</div>
    <div>Box 6 - text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Obsidian Age
Solution 2

'CSS remove the gap on inline-block elements between two child elements [duplicate]

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]