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

CSS How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Aldo Merino
Aldo Merino
6,066 Points
Posted by Aldo Merino
Aldo Merino
6,066 Points

Diference btw inline-block and inline

like topic say's whats the diference betwen "display:inline;" and "display:inline-block" i used it on my workspace but i see no diference

2 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Inline elements don't accept width or height values. Also using margin-top, margin-bottom, padding-top or padding-bottom values don't affect content around the element.

Inline-block elements do accept width and height, and elements around an element set to inline block are affected by padding and margins. display: inline-block is good to use on <a> tags that you want to style as buttons, since you can control the width and top and bottom margins and padding.

See this example: http://codepen.io/sawmac/pen/aJHfL/

Aldo Merino
Aldo Merino
6,066 Points
Aldo Merino
Aldo Merino
6,066 Points

Thx a lot for the answer, din't see any diferences because my div has no margin or width values.