Margin overlapping issue - Post ID...

User 122279 Photo


Senior Advisor
13,141 posts
Online Now

I remember from the days when we were all just writing code, that if you had two elements below each other, both with margins, then the two margins, in my case bottom margin 50px of the one and top margin 50px of the other, would overlap, with the result that the two elements would have a space of just 50px between them. That was when <br> used to come in handy, as a buffer. It is the same thing in SD, but we have no <br>.
In my case I cannot use padding instead, so could someone please suggest a good workaround for this issue?
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2699991 Photo


Registered User
3,004 posts
Online Now

Inger wrote:
I remember from the days when we were all just writing code, that if you had two elements below each other, both with margins, then the two margins, in my case bottom margin 50px of the one and top margin 50px of the other, would overlap, with the result that the two elements would have a space of just 50px between them. That was when <br> used to come in handy, as a buffer. It is the same thing in SD, but we have no <br>.
In my case I cannot use padding instead, so could someone please suggest a good workaround for this issue?


I am a bit of a loss to understand

If you have 2 elements in a container (say paragraph) you set the bottom margin of the top element to 50px and the top margin of the bottom element (say another paragraph) then the two elements have a space between them of 50px.
is that not what you are trying to get???? the same way. Unless I am totally misunderstanding

It applies to any element you put in the same container except video elements
Attachments:
https://mawarputih.id
The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Page Ingredients
User 122279 Photo


Senior Advisor
13,141 posts
Online Now

No, I'm trying to get a 100px space, and I could of course manage that by putting one of those containers in yet another container, to get a buffer that way, but I was wondering if there might be another workaround.

I'm attaching a wee mockup, now made with the HTML Editor, to illustrate the problem. If you remove the <br>, then see what happens to the vertical space.
This is no problem with horizontal margins, only top and bottom margins.

Attachments:
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 122279 Photo


Senior Advisor
13,141 posts
Online Now

You could of course say, make the margin on one of the elements 100px right from the start, but it is not so easy, as these elements have to be reusable with the same margins.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 122279 Photo


Senior Advisor
13,141 posts
Online Now

Well, I think I've found some ideas:
https://bitsofco.de/collapsible-margins/
https://css-tricks.com/what-you-should- … g-margins/
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 122279 Photo


Senior Advisor
13,141 posts
Online Now

So, here is one solution ;)

I had read about some way of solving the collapsing margins earlier, but it was such a long time ago so that I didn't remember it.
Attachments:
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 379556 Photo


Registered User
1,084 posts

Perhaps I'm not appreciating the problem, but the following seems perhaps another solution.

In Vanilla, top or bottom padding adds to the height of the element padded, and so I simply have used top and bottom padding instead of top and bottom margins.

In non-Vanilla frameworks, top and bottom padding seem not to follow the strict CSS3 of Vanilla, but do box-sizing to prevent increasing the height etc. The same effect seems available, however, by using top and bottom padding instead of top and bottom margins, and increasing the height of the elements by the amount of padding involved.

Information about box-sizing is available here.

Frank

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.