div Margins with display: inline-block-CodePudding

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.

CodePudding user response：

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 >
<div >
child1
</div>
<div >
child2
</div>
</div>

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

CodePudding user response：

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 >
  <div >
    BOX 1
  </div>
  <div >
    BOX 1
  </div>
</div>

Align boxes on left and right according to width
<div >
  <div >
    BOX 1
  </div>
  <div >
    BOX 1
  </div>
</div>

Align even spacing on left and right
<div >
  <div >
    BOX 1
  </div>
  <div >
    BOX 1
  </div>
</div>

CodePudding user response：

You could simply use flexbox link. All information about flexbox you'll find in link I have provided.