CSS remove the gap on inline-block elements between two child elements

Question

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?

score 0 · Answer 1 · answered Mar 17 '22 at 02:00

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.

That won't remove the space. It will fill the height box to became like the others... That's not what I want... — Andrei, Mar 17 '22 at 02:03

Kameron · Answer 2 · 2022-03-17T04:03:16.927

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>

You did not understand the problem. Leave the margin or let it there. I don't talk about margin. I am talking about the gap between box 2 and box 5. — Andrei, Mar 17 '22 at 02:11
Still not a solution. I don't want box 2 to go down, but the box 5 to go up... — Andrei, Mar 17 '22 at 02:16
@Andrei See edits - probably your best bet with the requirements of all children having `inline-block`. Unless you want to completely restructure your HTML. — Kameron, Mar 17 '22 at 02:54

CSS remove the gap on inline-block elements between two child elements

2 Answers2