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
karan Badhwar
Web Development Techdegree Graduate 18,135 PointsMargin : auto;
I have 2 questions:- 1) so margin basically makes the items ignore justify content, coz if i give margin right all the items are at the basic space and they are placed with Space-Around? 2) Margin auto will only work on Horizontal Axis only if i give just auto to every side it won't grow up and down as well, as it can increase the height as well, but it didn't grow?
4 Answers
Jason Larson
8,361 PointsIf you are applying margin: auto; to .item then it will center the item both horizontally and vertically, unless something else is overriding the margin. If you changed the height of .container, then you should have seen the white space around the items increase. The easiest way to see the impact of your settings is to open the devtools in Chrome, then select one of the item elements. In the Styles window, you will see exactly which styles are applying margin. You can also disable them and modify them right in that window, so you can see what happens in the browser when you disable the margin property from the .item class. You should see a significant change in the appearance of the items.
Jason Larson
8,361 Points1) Margin does not override justify-content. 2) Margin works on both the main axis and the cross axis. First, make sure you are not setting values in flexbox.css that are getting a higher priority than items in your page.css. Next, make sure that you are applying the margin to the correct class. Remember that margin affects the space outside the item, so setting the margin on .container is not going to show as much difference as setting the margin on .item. Also, make sure your justify-content is being set on .container, as you're not going to see it do anything on .item.
Let me know if you still have questions, or if it's still not working for you.
karan Badhwar
Web Development Techdegree Graduate 18,135 Pointshi, thankyou so much for the response, but i applied margin: auto on the item only but it just moved center and i see no difference in the container
Jason Larson
8,361 PointsI'm confused on what you are asking. If you only applied margin: auto on the item, why would you expect to see a difference in the container? At this point, it would be helpful if I could see your code. Could you paste your .css, or provide a screenshot or something?
karan Badhwar
Web Development Techdegree Graduate 18,135 PointsActually sir, I don't have the snapshot of the code as I moved forward with the course but what I am trying to say is that when i applied margin: auto; to .item ( to an item) that particular item moved to the center on Main Axis but i did not see the empty space making changing the height of the container as i thought that the empty space should go on every side like vertically and horizontally, but this property on an item space got utilized only on the horizontal axis. I hope i am clear this time and I am sorry I know i am really bad explaining from next time onwards i will put the snapshot for sure
karan Badhwar
Web Development Techdegree Graduate 18,135 Pointsokay sir, I will try on dev tools next time for sure. Thankyou so much!!