Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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.

2 Answers

Steven Parker
Steven Parker
216,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).