Welcome to the Treehouse Community
Looking to learn something new?
HTML & CSS Chaos
I know html and css pretty well, but there are a few problems. First, my code is all messed up, and I can't read it few days later. Second problem is that I'm very confused with margins. If I change the margin of one element, margins of other elements get messed up. Can someone please direct me on to the right path with spacing, since I'm starting to get confused and frustrated.
Steven Parker216,057 Points
It would help if you show a specific example to illustrate what you mean by "all messed up".
An example of your margin issue would also be helpful, but in the meantime one aspect of margin interaction that is often confusing is called margin collapse. There's a discussion of it on the MDN page Mastering margin collapsing, and also in this article on CSS Tricks called What You Should Know About Collapsing Margins. There's plenty other references online but those are two of my favorites.
Be sure to post a code example if you're still having problems.
The best advice for learning margins and padding is to give all your elements a red border. Then you can use the console to see the margins and padding and how each is aligned within one another. After that, it’s a matter of creating a look you want to emulate by trial and error.
YouTube and treehouse videos helped immensely too. Divs are like a room, and inside that room are elements (like a heading or paragraph), and you can either move the entire div around (margins, padding, etc) or move a single element around. Perhaps you’re moving the parent div when you’re trying to move an element?
Think of margins as the same way you’d think of a margin on a piece of paper - it’s pushing away from other objects (the margin on paper pushes the text away from the edge), and padding fills in more white space inside the paper (like if you could stretch the paper outwards from the element).