Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Gabriella Toth
2,385 Pointsdifference between aligning using margin and text-align?
For the #wrapper we used margin: 0 auto; in order to get it centralized. for #logo, we used text-align to achieve this. what is the practical difference between the two approaches?
3 Answers
Alan Linush
2,316 PointsMargin expands the space between elements. For example you have Image "A" and Image "B" right bellow Image "A".
So you give a margin of 5px to Image "A" and a margin of 5px to Image "B". You have now created 10px of space between Image "A" and Image "B" and any element you position around those images is going to have a 5px separation from the images.
Text-align ,on the other hand, aligns the element inside it's box. So if you text-align:center; , then you are centering the element inside of it's box which is usually 100% of the pages width.
The best way to experiment with text-align is to set a - border: solid 1px black; and see how the value moves inside of the box when the text-align changes. you can also change the width to a different percentage(%) and see how text-align:center; is different when the element's box changes size.
Hope it helped! :)
frontend
15,619 Pointstext-align=center is used to align the content (text for example) to center, however margin: auto is used to align the element itself to center. Does this make sense?
Gabriella Toth
2,385 PointsThank you so much guys, it makes perfect sense now!