div Margins with display: inline-block

Question

I'm trying to manipulate divs without using float, using display: inline-block; in my css allows me to get the siblings next to each other within a container div, but with inline-block, I can't space them apart using margin-left: 20px;, margin-right :20px; ... and so on.

I'm sure there's a really simple solution, even if it doesn't involve using display: inline-block;, I just want to avoid floats and preferably avoid padding too.

Try using [FlexBox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)? — Megrax, May 25 '22 at 10:52
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, May 25 '22 at 11:10
While using flexbox may well be a better approach, inline-blocks respect margins so you should have been able to space them apart. But since you didn't post any code, we can't show you where you were going wrong. — Alohci, May 25 '22 at 13:01

score 0 · Answer 1 · answered May 25 '22 at 11:28

you can try flex-box method to create space between two div which is inside a div (I conclude that from your question )

.parent{
border:2px solid red;
display:flex;
justify-content:space-around;

}
.parent div{
border:3px solid black;
}

<div class="parent">
<div class="child1">
child1
</div>
<div class="child2">
child2
</div>
</div>

you can also add many child div as you want , they will automatically make place in the parent container.

score 0 · Answer 2 · answered May 25 '22 at 11:42

Here you can see below how i managed to do so without display:inline-block; and this will not break on any device unlike inline-block.

.box {
  width: 200px;
  height: 200px;
  background: #F3F3F3;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
}

.container {
  display: flex;
  margin-bottom: 40px;
}

.container.two {
  justify-content: space-between;
}

.container.three {
  justify-content: space-evenly;
}

Margin 20px in between
<div class="container">
  <div class="box">
    BOX 1
  </div>
  <div class="box">
    BOX 1
  </div>
</div>

Align boxes on left and right according to width
<div class="container two">
  <div class="box">
    BOX 1
  </div>
  <div class="box">
    BOX 1
  </div>
</div>

Align even spacing on left and right
<div class="container three">
  <div class="box">
    BOX 1
  </div>
  <div class="box">
    BOX 1
  </div>
</div>

div Margins with display: inline-block

2 Answers2