I’m encountering an issue where the gap property in CSS isn’t having any effect on my layout. Upon inspection, I noticed that some of my containers have display: block; set, which seems to be preventing gap from working as expected. Specifically, I’m trying to use gap to create spacing between elements within a container.

Here’s a simplified example of my CSS setup:

.centered-div {
  display: block; /* Problematic line */
  /* Other properties */
  gap: 24px; /* Doesn't work */
}

I understand that gap is primarily used with flex containers (display: flex; or display: inline-flex;). However, changing display: block; to display: flex; isn’t feasible for this particular container due to layout constraints.

Is there a way to achieve spacing between elements (gap) without changing display: block; to display: flex;? Or is there an alternative approach that I can use to achieve similar spacing effects in a non-flex container?

Any help or insights would be greatly appreciated. Thank you!