Is it normal practice to use margins to layout a page?

HTML-CSS
#1

Hello, im new to html and css. Im also learning a bit of Javascript and want to have a good understanding of these concepts, but recently Ive found that I may not understand CSS as well as I initially thought I did. Ive been using position relative to layout my webpages. I quickly came to understand that this was not the best practice due to relative positioning leaving blank spaces visually in the layout. So I learned that it may be better to use margins to move elements around for layout purposes. However, Im feeling that this is extremely tedious because im adding a margin top, margin bottom, margin left etc. to almost every element to get them to layout the way that I want.

I guess my question is, Is this an accepted or even a actual way to layout pages or am I doing it all wrong? Im starting to learn about Flexbox and Im thinking that maybe this will be a ‘cleaner’ way to layout my pages. Is this the ‘correct way’ to do things? Is learning CSS Flexbox a MUST when it comes to layout? I just want to know if Im on the right track because it really feels like im taking stabs in the dark when it comes to getting a better understanding of layout practices in CSS. Please help.

Any advice and guidance will be greatly appreciated.

Thanks.

#2

Yes, absolutely. Positioning elements with margins is generally something you want to avoid (unless you use margin: 0 auto or similar to center an element within its parent).

The basic layout of a webpage should always be done with flexbox or CSS grid, because it easily allows you to make a page responsive. Imagine you have an element and position it with margin-left: 400px. Now you look at that page from a smartphone that is only 360px wide. It’s probably clear why this wouldn’t work. So you’d have a lot of media queries if you use margins (or position:relative, the problem is the same then, at least if you use px values instead of %).

It may look complicated at first, but flexbox isn’t so hard to learn, it just needs some practice. This is a good way to start and get a basic idea of how it works: flexboxfroggy.com/

#3

Great! Thank you. Yeah, by using margins to layout a page im faced with the task of basically redoing my entire layout multiple times with multiple media queries in order to make my pages responsive.

So by using Flexbox, the pages will adapt better to different devices in a more automatic and dynamic way, thus avoiding the need for so many media queries?

#4

Flexboxfroggy is also really good! Thank you.

#5

Yes, you can write CSS so that the elements on the page automatically rearrange themselves when the viewport gets narrower/wider. Maybe besides flexboxfroggy (which is great to learn the properties and syntax), also watch a few videos, so you’ll see how it works in action, with a real page.

#6

ok great, will do. thank you. Yeah I was completely unsure as to which direction to go. Do I keep using margins to do layouts, or is Flexbox the way of layouts. but now I see the many limitations of using margins for layout. thanks for your help.