Newbie Question: best practice to separate page sections?

Idk if i used the right wording, but here is some back up. Im still on early stage in html/css pages designing and one things constantly bugs me- where to put the space which separates different sections/elements of my page, in order to make them visibly distinguishes. Parent elements padding, child elements padding/margins, only top or bottom margin/padding when block elements follow the natural flow downward? I suppose it varies by the case, but there must be some standard, something that could ease my decision.
I often end up constantly revising my elements padding and margins, always somethign conflicting with another, or 2 or more values stack with one another, serving the same purpose (e.g. have a child element bottom margin adding up to its bottom padding and/or parent element bottom padding/margin, ending up in wide open space which could well be a single property).

Hey there,

I think this strongly depends on the whole page and your personal preferences, personal workflow etc.

If you show us an example project, we can talk about it in a more practical way.

Adding to the point from @miku86 regarding an explicit example. It really depends on the design you have in mind for your page and how you want to convey information to the user.
For example, in UI/UX it’s sometimes a good idea to group content with the same category together. This means buttons, paragraphs or div’s that are about a specific thing better be grouped together.
However, this might change when you only have two or three things to show on your page.

I also recommend getting your hands dirty with some design system like material from Google. These are a collection of ‘good to start with’ principles in the design of your webpage. Checking these kinda systems could give you a general idea of how a web page is usually designed and what are the foundations.

Hope you have some fun with it and let us know how it goes :call_me_hand:

1 Like

thanks for your replies; Shervinee could you link me to such design system? Any you would recommend

Of Course, it might be a good idea to start with the material design system at https://material.io/

From there you can navigate to guidelines and codes to see what they suggest for each component.

If you’re looking for specific padding or margin values you can navigate to specs for each of the components and check those out.

I suggest putting a border on container elements to visibly see them and see what exactly margin and padding does when you apply them.
Or you can apply it to every element with *{ border:2px solid blue }