Weird Issue with Row and Div Margins

[Maratopia_Digital]

Hello,

I’ve been having a weird issue with Row And Div Margins. Below are two screen-recordings of the issues:

So if I have 2 Rows on top of each other and I want to add a margin of 25px to the bottom of the top row and add a margin of 25p to the top of the bottom row, it does not add the extra 25px to the bottom row and will only add if I do a number above 25px. (the video will explain a lot better)

Here is the div margin, and if i add any margin to the div it does that!

Not sure what’s going on and it’s not a huge issue, but can be annoying sometimes as it’s not supposed to be like this.

Hopefully, this can be patched.

Cheers,

[prakash_s]

Hello @Maratopia_Digital

Thanks for writing to us.

In order to help you with your concern, we need to check your settings. I would request you, please share your details in a secure note. Please provide the following details meanwhile you must troubleshoot common issue before we investigate your settings.

• WordPress Login URL
• Admin level username and password
• Exact Page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[Maratopia_Digital]

The secure note has been added.

After doing a bit of troubleshooting it seems it’s something to do with flexboxes or something like that. But that’s just a guess

[ruenel]

Hello @Maratopia_Digital,

Row elements are displayed using Flexbox. The margins will not fully be applied to the Row elements. Within a Flexbox, the item spacing can be stretched or space evenly. So if the Row elements has a transparent background color, it is best that you use top/bottom padding instead.

Best Regards.

[Maratopia_Digital]

Hello @ruenel,

I’m sorry but I don’t understand your answer. Can you please have a look at the video below as I think it is a bit more obvious what is going on with the row’s margins:

Also, can you explain to me what is going on with the div elements and when I set a margin to it, it does not set it as it should, the video is above on my first message?

Cheers,

[ruenel]

Hello @Maratopia_Digital,

The bottom margin of the first row has the same value of the top margin of the second row. The top margin of the second row will not take effect or does not create space because it is of the same value. You need to increase the top margin of the second to create some space. All of this is happening because both the of the Row element is using Flexbox.

Row Margins

If you want to have the same amount of space (margin) in between a line, you should be using an Element that is displayed as “Block” and not as “Flexbox”. Having to separate those rows by using a section would help that. And since they are on same group or section, your only option is to adjust the top and bottom margins of the Row elements.

Hope this helps.

[Maratopia_Digital]

Hey @ruenel,

Thank you for the detailed explanation that makes a lot of sense now.

Can you also let me know why this is happening to the DIV margins?

Cheers

[ruenel]

Hello @Maratopia_Digital,

As soon as you apply a top or bottom margin to a DIV element, the left or right padding will also be applied. If you set the left margin to 0, it will reposition the Div element to the leftmost of your browser window. You need to set the left and right margin to auto so that it remains to its position while you apply the top or bottom margin.

I would highly recommend that you play around with the left/right margin by switching from auto to 0 and back so that you can see how the Div element changes its position.

Best Regards.