Very Basic Tip for CSS layout - margin, padding, etc

Struggling with margin, padding, and the like?

Set all your elements to have a border of say, 1px solid color.

Give different colors to your divs, p, and whatever you have going on on the page.

That way you have a clear view of the layout and what you’re doing to it when adjusting margin and padding, and what is overlapping, and the positioning.

The same result can be achieved by opening the Inspector (right click or Ctrl + Shift + I): you’ll see that when you select an element you have different colors surrounding it.



1 Like

I think that this image explains it very very well:

1 Like

This is what I did when working on the front end projects.
Here’s an old CodePen of what I did when learning the bootstrap grid:

1 Like