How to adjust the spaces between elements in inline-block layout? - html

Question

I am trying to create a layout without using grid or flexbox, I am using display: inline-block to achieve that but i have a problem with adjusting spaces.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
text-align : justify;
}
.wrapper > div {
display: block;
margin-top: 5px;
}
.header {
background: lightgreen;
margin-top: 0;
}
.footer {
background: #eee;
}
.main > div {
display: inline-block;
width: 49%;
height: 20vh;
background: #eee;
}
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
<div class="footer">footer</div>
</div>
I am trying to achieve the same effect as justify-content: space-between in flexbox
but i got elements that are not aligned well in the layout.
I can fix the spaces around item4 but using margin-left but i don't like this solution.

Answer 1

Add a hidden element to trigger the justify alignment for the last line but you will need to use a negative margin-bottom to remove the extra line added.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
text-align : justify;
}
.wrapper > div {
display: block;
margin-top: 5px;
}
.header {
background: lightgreen;
margin-top: 0;
}
.footer {
background: #eee;
}
.main > div {
display: inline-block;
width: 49%;
height: 20vh;
background: #eee;
}
.main:after {
content:"";
display:inline-block;
width:5%;
height:50px; /* we consider a bigger value than the line-height*/
}
.main {
margin-bottom:-50px; /*the same value defined in the pseuo element*/
}
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
<div class="footer">footer</div>
</div>
Or use font-size:0 trick to avoid that extra line:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
text-align : justify;
}
.wrapper > div {
display: block;
margin-top: 5px;
}
.header {
background: lightgreen;
margin-top: 0;
}
.footer {
background: #eee;
}
.main > div {
display: inline-block;
width: 49%;
height: 20vh;
background: #eee;
font-size:initial;
}
.main:after {
content:"";
display:inline-block;
width:5%;
}
.main {
font-size:0;
}
<div class="wrapper">
<div class="header">header</div>
<div class="main">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
</div>
<div class="footer">footer</div>
</div>

Answer 2

I don't think you can achieve this without setting the spacing. As you probably know, you can get better control of inline-block layouts setting negative letter-spacing on the container and resetting on the item: .main {letter-spacing: -4px} .item {letter-spacing: 0} (You need to test if 4px works).
Or (since we're not using flex :), you could float odd and even divs left and right: .item:nth-child(odd) {clear: left; float: left} .item:nth-child(even) {float: right}