What is the best way to modify the spacing between elements in an inline-block layout?

Currently, I'm working on designing a layout without relying on grid or flexbox. Instead, I am utilizing display: inline-block to accomplish this task, but I am facing challenges 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 attempting to replicate the same effect as justify-content: space-between in flexbox, however, some elements are not aligning properly within the layout.

To adjust the spacing around item4, I can use margin-left, but I am searching for a more elegant solution.

htmlcss

Answer №1

To achieve justified alignment for the last line with a hidden element, you can add 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>

Another approach is to use the font-size:0 trick to prevent the 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

To achieve this specific design, you may need to adjust the spacing. A useful technique is setting negative letter-spacing on the container and resetting it on the items in inline-block layouts: 

.main {letter-spacing: -4px} .item {letter-spacing: 0}
(Make sure to test if the 4px spacing works for your layout).

Alternatively, without using flexbox, you could float odd and even divs to the left and right respectively: 

.item:nth-child(odd) {clear: left; float: left} .item:nth-child(even) {float: right}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying a loading image when opening an external link using window.open

When a pop-up is opened through a window.open() function for external sites, I am looking to display a loading image icon for the links. One approach I considered is to show the loading image in a 'div' and retrieve the content of the external s ...

javascriptjqueryhtml

Identify which browsers are compatible with HTML5 video autoplay detection

Having completed several projects with video backgrounds that autoplay when the page loads, I have encountered issues with mobile browsers not supporting the autoplay attribute on HTML5 videos. In these cases, an image is loaded instead of the video. To d ...

jqueryhtmlhtml5-videomodernizr

Finding the image source of a clicked image

Is it possible to retrieve the image src after clicking on another image? $(document).ready(function() { $('img.getimage').click(function() { alert($(this).attr('src')); }); }); .sinistra { width: 150px; } .getimage { wi ...

jquerycssonclick

Extracting values from multiple checkboxes and binding them to textboxes using VueJS

After reading a basic example of multiple checkboxes on Vue's Docs here, I understood how the selected checkbox values are added to an array. This functionality worked well for my project, but I needed something different. In my app, I wanted the abi ...

javascripthtmlvue.js

When using JQuery's :first selector, it actually chooses the second element instead of the first

I'm facing an issue with a JQuery script that makes an AJAX request to the following URL https://djjohal.video/video/671/index.html#gsc.tab=0, which holds information about a video song. My goal is to extract and retrieve all the details from the HTM ...

javascriptjqueryhtmlajaxselector

Troubleshooting PHP password change functionality issue

I'm having trouble with my code and need some help identifying the issue. The problem I'm facing is that when I try to set a new password, it doesn't seem to save in my database and I can't log in with the new password. Here's the ...

phphtml

What causes a div with display: table-cell to have excessive padding when an image is added to it?

Is there a way to remove the padding completely? Take a look at the jsfiddle version: CSS: .table { display: table; height: 250px; border-color: black; width: 500px; padding: 0px; } .cell { display: table-cell; height: 250px ...

htmlcss

Laravel: Issue with displaying stored images from the database

When using Laravel, I encountered an issue where the stored image from the database is not displaying: Even though $post->image has the location posts/1lSBv7Ana8Lonj9Au37IrujjnnEaYgzNWyamch33.jpeg, the image does not show up. The code snippet in index ...

phphtmllaravelubuntucontent-management-system

Apply SetTimeout exclusively for desktop devices

A website I'm working on has a background video from YouTube using YTPlayer. To enhance the user experience, I have implemented a CSS spinner that displays while the page is loading. However, I noticed that the spinner disappears before the video fini ...

javascriptjqueryhtmlcss

The spacing within the table's <tr> elements does not get altered

I am struggling to add a small space in the table <tr> but my attempts have not been successful. How can I resolve this issue? Please refer to the image below for clarification: https://i.sstatic.net/HXdhq.png .panel-booking .panel-body { pad ...

htmlcsshtml-table

Material-UI: The Mystery of Missing CSS Properties

Struggling to apply a CSS class to an element from Material-UI: bw:hover { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } Tried using makeStyles: import { makeStyles } from '@material-ui/core/styles' ...

javascriptcssreactjsmaterial-ui

How can I retain the value of a String even after clicking the Submit button on a .jsp page?

I am encountering an issue where, after clicking the submit button, I lose the content that was previously stored in my textToConsole variable. Post submission, only "hello" remains in the variable. How can I prevent the loss of the text: "world!"? <% ...

javascriptjavahtmlstringjsp

CSS: A guide to correctly setting an image URL for a checked checkbox

In my current situation, I have a list of checkboxes with corresponding images. When a checkbox is checked, I would like to add a black circle behind the image. Here is an example of the current output: https://i.sstatic.net/Pq4vP.png This is what I exp ...

htmlcssreactjscheckbox

My CSS is giving me some trouble

Currently, I have 4 widgets with different sizes placed within a main div called #box. To center them, I reduced the width to about 60% and set margin left and right to auto. However, when I zoom out in my browser, the widget blocks move more to the left a ...

htmlcsswidthmarginresponsive

align the horizontal navigation bar

I am facing an issue with my horizontal navigation bar. I want to include a search bar within the navigation bar, but it is causing misalignment. Here is the link to the code: https://jsfiddle.net/r6ntxg2f/ If you look at the menu, you will notice that i ...

css

The website is experiencing display issues when viewed on Internet Explorer 10 and above

I am currently managing a few websites running on aspx with an older version of DNN 4.x. While these sites display properly on Google Chrome, Fire Fox, Opera, etc., I have noticed that there are rendering issues specifically on IE 10 and above for the navi ...

htmlcssinternet-explorer-10internet-explorer-11

Populate the div with an image that stretches to the full height

I'm facing an issue with my website's front page design, where a div is divided into two sections using the Twitter Bootstrap grid system. When the second grid (span9) is taller than the first (span3), the image perfectly fills up the span9 area ...

htmlcsstwitter-bootstrap

What is the best way to pass a variable from one PHP file to another?

This question may seem like a duplicate, but I found no helpful answers elsewhere. I'm in the process of creating a website where users can respond to various types of questions. To achieve this, I've written code that displays the corresponding ...

phphtmlmysql

Validating AJAX responses

Recently, I have begun working with AJAX and have encountered an issue related to error checking while parsing XML data in JavaScript. The problem arises when I dynamically create an XML file using C code - sometimes I receive an error stating "unable to r ...

javascripthtmlajax

Using Jinja2/Python, is it possible to alter the parent's style depending on the child's value?

Initially, I found that the :has() combinator accomplishes my desired outcome. In my HTML, I have a table structured like this: <table class="table"> {% for dict_item in data | sort(attribute='name') %} <tr class=" ...

pythonhtmlcssflaskjinja2