I may be overlooking something obvious or perhaps written about elsewhere, but here's what happens to me.
(a) I insert a container (leaving its default settings) into a column.
(b) I insert into that container an element* (leaving its default settings).
(c) In the Design panel for that element I use the top margin setting (up arrow) to create a positive top margin to the element.
(d) I expected the action at (c) above to move the element down inside the container, but instead it moves the container down.

There are several ways of overcoming this, such as using top padding instead of top margin, or setting the container to float left or giving the container a relative position.

I would be interested to know regarding the seeming oddity -
1. whether this is intended to happen (does HTML perhaps just work that way?) or whether this is a glitch in the program;
2. why this doesn't happen to the items in the asterisked note below;
3. whether others find the same in RSD1.5, RFF and RBB (I'm using RSD2 build 2019 in Windows 10).

Frank

* other than a button, button link, input or social icon

I am using the latest RBB and can confirm on Windows 10 that seems to be the case. Alternated using a heading and then a button. Button responds with margin, heading moves container when adjusting heading margin.

Thanks for checking, Twinstream.

I've found another example of overcoming the problem: putting a transparent 1px top border to the container.

Twinstream's confirmation that it affects another program, and my finding regarding a top border, suggest that this may be a matter for attention in future updates of the programs.

Frank

I am having different Flexbox model problems with containers. And this problem exists in RSD 1.5. I don't see how a column or a container should behave any differently.

Using picture elements, placing three in a column, and in a separate column, insert a container and put three picture elements into it. Zero out the margins if you wish.

Now, set the position to flex, justify space between. In the column, the elements are at the beginning, end and middle. In the container, there is an element at the start, and the other two are spaced apart, with a space at the end of the container. They are not justified space between. There seems to be an imaginary padding inside the container. In case it was an issue with a picture element, I tried using specifically sized containers to form boxes, and the same behavior occurs.
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify_space-between
wrapping the flex items in a <div></div> does not change the behavior when I do this in a text editor. I am surprised I did not notice this in RSD 1.5. am I wrong about this - shouldn't the container flex display model behave like a column flex display would?

I tested Bill's situation in RSD2 build 2019 and found the same discrepancy of treatment.

In the Inspector panel I compared the CSS (Read Only) sections of the flex column and the flex container, and found no significant differences other than in the top line (class etc.)

Similarly I examined the HTML code of using 'Preview on ...' and think that the seeming incorrect justify relates to class="container-fluid"

Frank

Bill,

I know that space-between is not supposed to have any space at either end but maybe you could try space-around and see if that works for what you want.

Here's a really cool 'visual' resource for flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I found this in a post that Inger shared about a flexbox tutorial.

Similar problem with { justify-content: space-between; }. There is an extra invisible padding it seems when a { display: flex;} is applied to a container.

With three container and space-around, they are separated like this in a container.
EMPTY (6.4%)
container (16.6%)
EMPTY (12.5%
container (16.6%)
EMPTY (12.5%)
container (16.6%)
EMPTY (18.6%)

Its seems that there is a calculation that is being made, and an extra space is being made. I don't know how the browser does its math, but it seems its being sent wrong calcs or the calcs are being instructed to add space.

For space between; instead of being told "Three elements and three 2 spaces between" its told to calculate "three elements, and three spaces, with a space one the end." And for Space-Around, its being told to calculate the 3 elements, 6 spaces for each element (one on each side), and 2 extra spaces on the end (3 elements and 8 equal spaces)

I found something similar, and did some experimenting after seeing your post. But I don't think its limited to the framework's .container-fluid, but a pseudo style property for .container-fluid and other containers.

In the Inspector, if you go to an afflicted container, and in the css on the right under "Pseudo Elements" you will find this:


cancel out and the problem goes away -= but I don't know how that would cascade into other problems.

Is there styling code I can add as a resource to cancel that out from the framework when needed?

PS: sorry to derail subject, but this all might be related somehow.

I'll have to leave such complexities to those cleverer than me.

My original queries in this thread arose from having intended in 'Your Support Room' to report the container issue as a glitch discovered in the RSD2 Beta, so that the CoffeeCup team could remedy it. My lack of expertise in HTML and CSS changed my mind: I thought perhaps I was just doing something wrong or overlooking something obvious to other users, as I didn't recall seeing others reporting in these forums such problems with beta RSD2 containers.

It now seems clear to me that RSD2 beta does have glitches with containers as shown in the preceding posts, and I hope the CoffeeCup team can address those problems in future updates. It is a beta version, and finding such problems so that they can be remedied is what beta testing is about.

Frank