Large spaces between blocks

  • cambob

    (@cambob)


    1 month ago

    Ive been developing with wordpress for a quite awhile now its really great for functionality and is getting better all the time for customizing. But the one thing that drives me crazy is all of the huge spaces between not only blocks but even in blocks, for example between columns or between text and media. Ive researched this a lot and pretty much every demo/tutorial shows how to set padding and margins to 0. But there is still huge spaces between blocks. That isnt really a solution if you want to visually group content by tightening spaces between elements. Also tried many many themes and everyone is the same when it comes to the big spaces even when padding and margins are set to 0. So Im assuming these spaces are hard baked in the core files.

    Not sure if this can be changed because I have looked high and low and have come up with nothing other than the usual settings in the editor that dont really give you 0 padding or 0 margin. Is this fixable with a deeper dive like maybe into core files or core css? Any suggestions would be great.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    1 month ago

    The spaces can be due to a variety of reasons. In some cases it’s baked into core WP, sometimes it’s the theme. In the case of the wild flowers featured image, the spacing is from the image itself, it has sizable transparent borders around the visible image. If you want to reduce the spacing, it’s best to edit the source image.

    Use your browser’s element inspector tool to see what CSS spacing is being applied. The tool will also show you which file the applicable rules are coming from. The file’s path will tell you whether it’s theme or WP core sourced.

    You can always add additional CSS to override any theme or core rules you are unhappy with.

    Thread Starter cambob

    (@cambob)

    1 month ago

    Thanks for the reply. Ive pretty much tried everything from line heights to setting all paddings and margins to 0. Spacers, grouping, paragaraphs instead of headings, columns instead of galleries, custom css ect. My first example wasnt the greatest I never realized i placed a png with space built into it.

    This example here shows the heading with a big space below it before there is an image. The bottom of the heading has padding and margin set to 0. The image below it has padding and margin top set to 0. Yet there is a big gap between them. Inspecting the two elements doesnt tell me anything other than confirm the padding is set to 0. The heading has a long range of classes but trying to track them down and inspect every one of them would be tedious and probably fruitless. Unfortunately it seems most of the spaces are hard baked into the core files.

    • This reply was modified 1 month ago by cambob.
    Moderator bcworkz

    (@bcworkz)

    1 month ago

    The page’s main title (actually a <p> element that’s after the <H2> element which isn’t visible) has a standard bottom margin of 2rem. You may have set H2 margin to 0, but not the paragraph element that constitutes the visible title; it has a default bottom margin that’s necessary for normal paragraphs. Either convert this specific <p> to a visible <H?>, or override this specific <p> element’s default styling with an element style.

    The <figure> element containing the image has an element style top margin of 80px. Similarly, you probably set the <img> tag’s margin to 0, but did not address the containing figure element.

    The way the block editor works can make it difficult to ensure you’re setting properties of the correct element. Elements are often nested and you may need to back out of where you are in order to access the desired block settings.

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.