Dan, I have an interesting situation. If I create a new project and just put a single Container component on the page, I am not able to adjust the right hand Margin of the container in Spacing. It does not respond. Only the left hand side changes.
Thatās just the way CSS works, you might want to use Padding instead.
Margin is the space outside an element ā it pushes things away from the element.
Padding is the space inside an element ā it adds space between the content and the elementās border.
1 Like
I donāt understand your comment, Dan: āThatās just the way CSS works.ā
I know what Margin and Padding do but I presume a Container knows what it is to move away from. Or do I have to put a Container in a Container for the inside Container to know what it is to move away from??? No, that doesnāt work either.
When I add a Margin to the LHS of a fresh Container, it moves its left-hand edge in from the LHS edge of the page (I think you call it the Viewport). This makes an assumption that the edge of the page is seen as an edge from which to move the side of the Container away from. Why does the same logic not apply to the RHS of a Container in regard to the Viewport.
PS It would be really handy to have some definitions of things in the Elements Manual, so we know what we are talking about. Iāve not seen a definition of Viewport, but I have heard you using it in the videos and have made an assumption it is the area I see where I build my web site???
No, just leave the outermost container left right margins on auto (they are by default), and use padding left and right instead.
Auto left right, is centralising the outer container in the body of the page. The container has content width, and that almost always needs to be left centralised by the default setting of auto margin left and right.
To get the layout you want I think you just need to set Witdh of your Container to āAutoā - as Iām guessing right now you have it set to āFullā. Hereās a video that shows the differenceā¦
The viewport is basically the visible area of a web page in your browser window. Itās the part of the page that you can see without scrolling.
You can learn more about viewports in webdesign here.
Hello Doobox,
If what you are saying is the way to set things up, then why do we even have an ability to set the right-hand Margin at all, if it doesnāt do anything.
In actual fact, as it stands now, the setting of the right hand Margin of a Container corrupts the right side of the page causing interference with the right scroll bar position.
As it stands, your method canāt handle what I want to do.
Perhaps I might put it this way to you. How do I place a box (Container) on a page such that the left and right hand Margins are an equal distant in from the left and right edges of the page.
Cheers
Iāve just shown you how to do it in the video above.
Ah thanks Dan. Your video response came as I was writing my reply to Doobox. I did not see it as I was interrupted part the way through.
Your video does indeed give me the answer I need and solves my problem. Thank you.
It does however beg the question: what do the Size settings really do, since they can dramatically change the logic of the Margin settings? There is an interaction here which can be confusing. Perhaps as a general rule it could be said that first Containers on a page should be set with Sizing Width to Auto???
Thatās a bit of a deep question and not something Iām going to attempt to answer here.
All of our controls are tied to CSS/Tailwind properties, so if you really want to learn more about how layout and sizing work on the web, youād need to start digging deeper into how CSS works in general ā there are lots of good resources on the internet to help you learn about this stuff.