Tips for achieving the perfect spacing between inline-block elements

A sample scenario: https://i.sstatic.net/gmyS0.png

Is it feasible to maintain consistent spacing between inline div elements? The challenge lies in the fact that auto width does not seem to be effective in achieving this. Here is the progress I have made so far:

HTML

 <div id="frame">
      <div class="block">1</div>
      <div class="block">2</div>
      <div class="block">3</div>
      <div class="block">4</div>
    </div>
  </div>

CSS

#frame div {
    background-color: brown;
    padding-left: 20%;
    padding-right: 20%;
    width: auto;
    margin: 5px;
    display: inline-block;
}
htmlcss

Answer №1

Frame width should be fullscreen and block width needs to fit inside the frame, but it's not a critical concern.

If that's the case, you can opt for using percentages instead of the less supported flex:

  • Assign 20% width to each .block div
  • Add 4% margin-right to each .block div
  • Add either an extra 4% margin-left to the first .block or set a 4% padding-left on #frame

You have the flexibility to adjust these values as long as they add up to a maximum of 100% of #frame.

#frame {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 0 0 4%;
}

#frame div {
    display: inline-block;
    background-color: brown;
    width: 20%;
    margin: 1em 4% 1em 0;
}
<div id="frame">
      <div class="block">1</div>
      <div class="block">2</div>
      <div class="block">3</div>
      <div class="block">4</div>
    </div>
</div>

Answer №2

Consider using Flexbox for your layout, but remember that older browsers may not support it fully.

#container div {
    background-color: brown;
    width: 20%;
    text-align: center;
}

#container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
}

https://jsfiddle.net/68vbc3s1/

Answer №3

Utilizing Flexbox makes the layout creation process seamless:

#frame div {
  background-color: brown;
  margin: 5px;
  flex: 1;
  padding:1em;
  color:silver
}

#frame {
  display: flex;
}
<div id="frame">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

If dealing with older browsers, a simple row table can also serve the purpose:

#frame div {
  background-color: brown;
  display:table-cell;
  padding:1em;
  color:silver
}

#frame {
  display: table;
  width:100%;
  border-spacing: 10px 0;;
}
<div id="frame">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

For modern browsers supporting grid layout (where column count is fixed), using CSS Grid is recommended:

#frame div {
  background-color: brown;
  padding: 1em;
  color: silver
}

#frame {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
}
<div id="frame">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

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

Find the size of the grid using the data attribute

I am currently working on a piece of code that involves fetching a data-attribute known as grid size from the HTML. My objective is to create a conditional statement that checks whether the value of grid size is "large" or "small", and assigns specific x a ...

javascriptjqueryhtml

Utilize Flexbox to arrange elements in a column direction without relying on the position property in CSS

Flexbox - align element to the right using flex-direction: column; without relying on position in CSS Hello everyone, I am looking to move my row element to the right without using positioning. This code includes flex-direction: column; and I do not have ...

htmlcssflexbox

The height auto transition in CSS3 begins by shrinking to a height of 0 before expanding to

My CSS code looks like this: .foo { height:100px; overflow:hidden; -webkit-transition: height 200ms; -moz-transition: height 200ms; -o-transition: height 200ms; transition: height 200ms; } .foo.open { height:auto; } When the ...

cssheightcss-transitions

Is there a reason we are able to simultaneously assign the disabled and selected attributes to <option> elements?

What is the rationale behind permitting the simultaneous setting of disabled and selected attributes on <option> elements, knowing that their values will not be submitted to a server? I was surprised that I did not receive an error in VS Code when I ...

html

Stop unwanted clicking on inactive buttons in Angular

I want to make sure that disabled buttons cannot be clicked by users who might try to remove the disabled attribute and trigger an action. Currently, I have this code to handle the situation: <button [disabled]="someCondition" (click)="executeAction()" ...

htmlangulartypescriptdom-events

Tips on efficiently inserting numbers into the names of copied input elements

I've been struggling with a problem for hours now and I need help... I'm trying to change the names of my automatically cloned inputs. Here is the snippet of my HTML code: <form id="dodawanie" action="" method="post"> <div class= ...

jqueryhtml

Transformation of CSS into SASS (or LESS)

Looking for recommendations on CSS to less or CSS to sass conversion tools. I've come across a couple like and , but unsure of their reliability. Any insights or recommendations on other tools would be highly appreciated. I have a sizable CSS code ba ...

csssassless

the div background is limited to the exact size of the text, not filling the entire

Currently, as I work on my web page using react.js, I'm facing the challenge of implementing a full-size background. Despite my efforts, the background only occupies the size of the text within the div. Here is the snippet of code I am working with: a ...

javascripthtmlcssreactjsbackground-image

How to add an 'alt' text tag to a background image sprite

I have a button that opens a new browser window, so I've added alternate_text and title tags to notify the user that a NEW window will open when hovered over. <img class="mp3PlayBtn" alt="Mp3 player opens in popup window" title="Mp3 player opens i ...

htmlcssaccessibilitycss-sprites

"What's the best way to update the src attribute of an iFrame when a user clicks

I'm new to coding in PHP or JavaScript, so please bear with me if my question isn't quite right. I'm looking for a way to dynamically pass and embed a URL from a link into the src attribute of an iframe. Essentially, I want users to click o ...

javascriptphpjqueryhtmliframe

Implement a default dropdown menu that displays the current month using Angular and TypeScript

I am looking to implement a dropdown that initially displays the current month. Here is the code snippet I have used: <p-dropdown [options]="months" [filter]="false" filterBy="nombre" [showClear] ...

htmlangulartypescriptprimeng

What steps should I take to troubleshoot the issue when utilizing full HTML link paths in my links?

I have come across the recommendation to use full link paths between pages on my website for various reasons. However, I am concerned about how to debug and work on my local testing environment when all of the links are using full paths. (Manually replaci ...

javascriptasp.nethtml

Unable to scroll when utilizing ng-html-bind functionality

My device specifications: $ ionic info Your system details: Cordova CLI: 6.2.0 Gulp version: CLI version 3.9.1 Gulp local: Ionic Framework Version: 1.2.4 Ionic CLI Version: 2.0.0 Ionic App Lib Version: 2.0.0-beta.20 OS: Distributor ID: LinuxMint Desc ...

javascripthtmlcssangularjsionic-framework

Vue's watch feature will not execute if the watched property remains unchanged during a page reload

<template> <!-- The navbar has a property for gender, the color of the navbar will change depending on the gender --> <!-- pass the props gender through a form submission and event --> <div class="nav-main" :class="{f ...

javascripthtmlvue.jsvuejs3

The current_time() function displayed an incorrect time value

When I utilized the current_time() function in PHP to retrieve the current time, it displayed an incorrect time. Instead of the correct time, it is showing 12 hours and 30 minutes earlier than the actual current time, even after modifying the php.ini file ...

phphtmlmysql

What's the deal with the Cordova Splash Screen?

I am currently developing an app with Cordova and I am facing some challenges with implementing the splash screen for Android. The splash screen is working perfectly fine on iOS, but I am unsure of how to proceed on Android. Do I need to install a plug-in ...

androidioshtmlcordovasplash-screen

Tips for obtaining the most recent HTML element in Angular

I was able to include HTML content in an Angular (7) UI using the DomSanitizer this.sanitizer.bypassSecurityTrustHtml("htmlstr") Once the content is sanitized and displayed in the HTML view, users have the ability to modify the values as desired ...

htmlangulartypescript

Targeting HTML tags, styling names, and class names using CSS

In the markup below, I am trying to target three specific points using CSS. img style*=right class=media-element I attempted to use the code below, which did not work: img[style*="right"][class="media-element"] {margin-left:10px;} However, selecting t ...

htmlcsscss-selectors

Using AngularJS to update attributes in an HTML tag within a string

My string contains HTML tags : var str = "<div><p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src='urlAAA' height='400' width=&ap ...

javascripthtmlangularjs

Creating a copy of a div using jQuery's Clone method

I need help figuring out how to clone a div without copying its value. I've attempted various methods, but they all seem to include the value in the cloned element. This is the jQuery function I am currently using: $('#add_more').click(fu ...

javascriptjqueryhtmlcss