Troubleshooting issue with CSS `gap` property malfunctioning in conjunction with `display: block;` setting

I've run into an issue with the gap property in CSS not working as expected in my layout. After investigating, I found that some of my containers have display: block; set, which seems to be causing the gap property to be ineffective. My goal is to create space between elements within a container using gap.

Below is a simplified version of my CSS setup:

.centered-div {
  display: block; /* Causing issues */
  /* Other properties */
  gap: 24px; /* Not functioning properly */
}

I am aware that gap is typically used with flex containers (display: flex; or display: inline-flex;). However, changing display: block; to display: flex; is not an option for this specific container due to layout restrictions.

Is there a way to achieve spacing between elements (gap) without switching from display: block; to display: flex;? Alternatively, is there another method I can utilize to achieve similar spacing effects in a non-flex container?

Any assistance or advice on this matter would be highly appreciated. Thank you!

htmlcssreactjs

Answer №1

.centered-div {
  padding: 24px 0;
}

.centered-div > * {
  margin-bottom: 24px;
}

.centered-div > *:last-child {
  margin-bottom: 0;
}

Implementing the methods above can assist in achieving the desired spacing between elements without the necessity of transitioning to a flex or grid layout.

Feel free to check out the Codepen Link to view the output and see my recommendation in action for a clearer understanding.

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

Add Django template without adding an extra line break

In my main.html template, I have the following code: <p>{% include "pouac.html" %}{% include "pouac.html" %}</p> The file pouac.html contains just one line: <span>pouac</span> When rendered, the main.html template generates two ...

htmlcssdjangodjango-templates

The image does not appear to have been edited even after clicking the update button

I'm currently following a Django tutorial but I'm having an issue with editing blog post images in my blog app. I am using Django version 3.1.2. views.py def edit_post(request, post_id): post = BlogPost.objects.get(id=post_id) if reques ...

htmldjangodjango-viewsdjango-formsdjango-templates

Prevent touch swiping on Bootstrap carousel in Safari

After adding the code snippet below to my Bootstrap carousel, I've encountered an issue where I am unable to disable touch swiping on iOS devices for the carousel. <div id="infinityWarContentWrapper" class="carousel slide carousel-sy ...

htmlcssbootstrap-5

How do I use regex to grab all the text between two specific headers?

I need help extracting text between two specific headings. I attempted to create a regex for this purpose, but it's not quite capturing what I want. Currently, it includes the heading and paragraph, but misses the last heading. My Current Regex: /^& ...

javascriptreactjsregex

Exploring intricate designs using HTML and Javascript

After extensive experience with both WPF and HTML5 JavaScript, one thing that stands out to me is the clear organization provided by XAML's defined panels. Grid, StackPanel, DockPanel, WrapPanel, and others offer a straightforward way to achieve consi ...

javascripthtmlxaml

Guide on personalizing the Material stepper component with labels positioned at the top

I am currently working with the Material Stepper component. While using it, I noticed that the stepper label position is set to left and bottom by default. However, I would like to customize it so that the stepper labels appear at the top and bottom of the ...

reactjsmaterial-ui

Dropping challenging shapes in a block-matching game similar to Tetris

I'm currently working on a game similar to Tetris, but with a twist. Instead of removing just one line when it's full, I want to remove all connected pieces at once. However, I've run into a roadblock when trying to implement the hard-drop f ...

javascripthtmlgame-physicstetris

Guide on creating a stationary side navigation bar in HTML with Bootstrap 5 and CSS

I am developing a website with a fixed side navigation bar that stays in place when scrolling through the content section. I experimented with both the fix-position in Bootstrap 5 and CSS methods, but no matter how I set it up, the side bar remains transpa ...

htmlcssbootstrap-5

How can elements be displayed differently depending on the return value of a function?

Basically, I am looking to display different content based on the status of a job: Show 'Something1' when the job is not processing Show 'Something2' when the job is running and has a status of '0' Show 'Something3&apos ...

htmlangular

Why does my console refuse to log the input entered for the search?

Looking to become proficient in web development, I am attempting to record HTML search queries in the console after storing them in a variable. However, when I try running the search procedure, nothing seems to be displaying in my browser's inspect co ...

javascripthtml

Can Next.js 13 support the usage of axios?

Despite trying to implement the SSG operation with the fetch option {cache: 'force-cache'}, I consistently received the same data even when the mock server's data changed. I found that using the fetch option {cache: 'no-store'} do ...

javascriptreactjsnext.jsaxiosfetch-api

What could be causing transition to not be recognized as an element in HTML?

<template> <header> <nav class="container"> <div class="branding"> <router-link class="header" :to="{name : 'Home'}">>FireBlogs</router-link> </div& ...

javascriptcssvue.js

What is the technique for defining sub paths in React-Router-Dom by excluding the parent path?

Imagine a Profile page that displays different components based on the path it receives. For example: /profile/posts will show the Posts component within Profile. /profile/comments will display the Comments component inside Profile. Typically, the Profi ...

javascriptreactjsroutesreact-routerreact-router-dom

What is the process for modifying the ButtonGroup color in Material UI using React?

Is there a way to achieve a design similar to this using Material UI (https://i.sstatic.net/X0aUV.png)? I've attempted to use ButtonGroup, but I'm unsure how to customize the border color. Currently, my layout looks like this: (https://i.sstati ...

reactjsmaterial-ui

Can CSS be used to generate these shadows?

Check out this image I made showcasing a board with an elongated shadow cast behind it. The intention is to emulate the look of the board leaning against a wall, resulting in a triangular shadow on either side. I'm curious if it's achievable to ...

css

What could be causing my file input to appear misaligned?

Can anyone assist me with a strange issue I am facing? Despite using inspect element on my file input and it appearing in the correct place, it does not function as expected. To see for yourself, visit oceankarma.co and click on 'Post' at the top ...

htmlcssfileinput

Can I use javascript/jquery to alter the direction of text in each line?

Looking for assistance with changing text direction on each new line. For instance: text left-to-right text right-to-left text left-to-right text right-to-left... etc. I would like the text direction to change with each word-wrap: break-word. Any help w ...

javascriptjqueryhtmlcsstext

Creating optimized CSS builds for Next.js production

In dev mode, I have separate Custom CSS files for different layouts which work fine. However, when I publish my app in production mode, Nextjs combines all the CSS files together causing issues with my layouts. ...

cssreactjswebpacknext.js

Create a receipt by utilizing jQuery with dynamically generated inputs

Is there a way to insert the descriptions and amounts of invoice items into the receipt, similar to the due date? The input for this section is dynamic with multiple rows that can be added or deleted. I'm considering using a counter that increments e ...

javascripthtmljquery

Tailwind CSS is perfectly compatible with the standard Gatsby example but seems to encounter issues with the gatsby-starter-blog

I decided to experiment with building a basic website using the default Gatsby example project along with Tailwind CSS, and everything was working perfectly. However, when I tried to transfer my index page from the default project to a new project based on ...

reactjsgatsbytailwind-css