In Part 7 of our Mastering Flexbox series, we focused on building flexible button, menu, and link rows. We used Layout Direction, Justify Content, Align Items, Gap, and Module Groups to create compact, responsive horizontal groups that can adapt across breakpoints.
In Part 8, we’re focusing on one of the biggest workflow shifts in Divi 5: controlling spacing with Gap instead of relying on margin for every spacing adjustment.
Many Divi users are used to spacing elements with individual margins. That habit can still work in specific cases, but it often creates extra cleanup when items wrap, stack, or change direction across breakpoints. In Divi 5, Horizontal Gap and Vertical Gap give you a cleaner way to control spacing between direct child elements from the parent container.
In this post, we’ll show you how Gap works, where to apply it, when margin still makes sense, and how to use Gap to create cleaner spacing systems for rows, columns, Module Groups, Nested Modules, buttons, cards, vertical lists, CTAs, and footers.
Why Some Divi Users Struggle With Spacing In Flexbox
If you’ve ever built a layout in Divi 5 and wondered why spacing still appears after resetting margins or padding, the issue is usually not one single setting. Spacing can come from the parent container, the child elements, the layout direction, default gap values, or nested structures.
Many designers still add margins to individual modules, buttons, columns, or links out of habit. That can be useful for one-off adjustments, but it is not always the best way to create consistent spacing between a group of related items. When content wraps onto additional lines, margin-based spacing can create uneven gutters, extra edge spacing, or breakpoint-specific cleanup.
Another common source of confusion is where spacing should be applied. Should it go on the Section, Row, Column, Module Group, nested element, or module itself? If you apply Gap to the wrong container, nothing may appear to change because Gap only affects the direct children of the container you’re editing.
Headers, button groups, card grids, icon lists, tag clouds, and footer link groups make this especially noticeable. They often contain several nested layers, so the right spacing control depends on which elements need space between them.
