Question on use of gutters, margins, and pdding

[rongreen]

Is there an article that someone could recommend, that pertains specifically to the WYSIWYG program, that gives some clear education on how value entries for gutters, margins, and padding settings influence the layout when it specifically comes a design element within a Flexgrid? I have read some good articles on line and believe I get the concept and application for a design element, but I am having trouble applying that to a Flexgrid and getting the same behavior. Thanks in advance for any recommendations.

[Pablo]

Note that these properties are not specific to WWB. These are standard HTML features.

Padding affects the inside of an element, creating space between the content and the border. It's used to create space inside an element, pushing the content away from the border.

Margin is the space outside an element, between the element's border and adjacent elements. It's used to create space between elements, pushing them away from each other.

Gutters are the padding between your columns, used to responsively space and align content in the grid system.

Also, the standard name for "Flex grid" is "CSS grid" in HTML.

[rongreen]

Thanks for responding. Is there ever a need to use negative margin values?

[crispy68]

You can just depends on why you need to and your design

[rongreen]

At first, my asking was based on more of an academic question, but came to be something tangible as I am trying to educate myself thru example. I have a Layoutgrid that contains two side-by-side text elements. The grid is structured as two 6x blocks, each one containing a text element. Between them is a 40 pixel space. I tried adding padding to close the two so they were touching, but that did nothing. Finally, I added a -20 margin value to the left margin of the element on the right and -20 to the right margin of the text element on the leftto each text element. Make sense? Again, this is not for a real design, but my playing. Was this not the right or best solution?

[Pablo]

Padding adds spacing, so if you want two elements closer to each other you will need to reduce the padding (or gutter).

[rongreen]

Thanks, but I still could use some clarification. So I am providing an example wbs file that I am hoping can be used to help clarify what I am asking? It contains 3 LayoutGrid structures. LayoutGrid17 and 18 represent my question and LayoutGrid1 and 2 how I chose to solve it. Each one contains two text elements. In LayoutGrids17 and 18 are Text Elements 6 and 7 in which they are separated by a 40 pixel gap that I want to eliminate as I did in LayoutGrid 1 and 2 below by entering -20 pixel margin for the left and right ends of Text Elements 8 and 9. Was that the best practice solution or is there another approach that would be recommended? Thanks for your patience.



https://www.greensphotoimages.com/Margins and Padding education.zip

[Pablo]

here spacing is caused by the border of the layout grid, but only in the workspace, so you do not need to use negative margin. If you preview or publish the page then it will be correct.

[rongreen]

Well you are right, when I previewed the page it was correct. Question? I thought in development, I would see what it would look like published? I suspect as the developer and through experience you knew that would be the case, right?

[Pablo]

The workspace is not a real browser, but a simulation. So, in some cases it may not look exactly as in the browser.
But I will investigate if this can be improved.

[rongreen]

In most cases I found that it looks either identical or very very close. This seems to be an isolated issue, but if it could be corrected that would be great!

[alan_sh]

Pablo,

It may be related to the issue I reported to you last week.

regards

Alan

[Pablo]

It may be related to the issue I reported to you last week.

No, this is not related. But this will be addressed in the next version.

[alan_sh]

Ok - sorry to butt in.

Alan