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
Abe Layee
8,378 PointsWhy does margin top and bottom does not effect inline element?
I am just curious. I don't know why by setting margin top and bottom does not effect inline element. Anyone mind sharing some knowledge with me. I appreciate it and thank you in advance.
2 Answers
Marcus Parsons
15,719 PointsHiya Abe,
Top and bottom margins do not affect inline elements because inline elements flow with content on the page. You can set left and right margins/padding on an inline element but not top or bottom because it would disrupt the flow of content. You can set margins on block (or inline-block but it will only look right if you set the vertical align right) because block level elements disrupt the flow of content.
This is from the CSS2 specification on inline formatting of elements:
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes.
Abe Layee
8,378 PointsAlright Marcus Parsons, thank you very much, It now make sense:D
Marcus Parsons
15,719 PointsYou're welcome, Abe!