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
Ariel Vainer
7,042 PointsWhats the difference between the result of this margin and padding??
In the exercise we had to use:
padding:0 0 0 30px; margin:0 0 10px;
For the iconography in the contact page.
Why it does not work if I use: padding:0; margin: 0 0 10px 30px;
Thank you!
3 Answers
Ashley Mullins
12,544 PointsBy default, the browser places the bullets OUTSIDE of the list item. So if you add padding to the list items, the text will be pushed, and the bullet will stay in the same place.
If for whatever reason you want the bullet to be inside of the content flow (placed inside of the list item), you could use the css property list-style-position and use the value "inside". You would do this on the entire list and not the list items themselves.
Like so:
ul{ list-style-position: inside; }
For your example though, you would just place padding around the list items and the bullets will remain in their same position. If you were having trouble it may have been because you were placing the padding on the list as a whole instead of on the list items.
Hope that helps!
Jacob Herper
94,150 PointsIt would most likely work only with a margin, as you suggested, but padding and margin are doing different things to elements. Margin is applied on the outside of an element, whereas Padding generates spacing on the inside of an element.
Unfortunately I am unaware of the example you have mentioned, so I cannot analyse why they have decided to do it like that, but I would expect, that it makes more sense to use a padding + margin.
Ariel Vainer
7,042 PointsThank you!!
How does the padding works on a bullet list? The text and the bullet are 2 different things?
They wanted you to separate the bullet from the text...
Jacob Herper
94,150 PointsThe UL element is indented with a padding-left by default, the bullet points are basically in the negative space before the text. If you set the padding to 0 the bullet points would move outside of your general style.