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

Posted by Jeff Busch
Jeff Busch
19,287 Points

display: inline-block; vs display: block;

I'm doing the How to Make a Website track. There is an image inside a section that's inside a div. To that image is applied the css rule of display: block;. I was curious and changed the rule to display: inline-block;. Before I made the change the image was centered inside the section element. After the change the image moved to the left. Is this the only difference between the two?

Thanks, Jeff

4 Answers

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

The main difference between block and inline-block is that a block element takes up an entire width of the screen. Other block elements would appear over it or under it vertically. With inline-block, elements can be located horizontally to each other.

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

This is a good and concise explanation. :)

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

Images, that display as block, would left align by default and take up empty space the rest of the width of the screen or element they are in (unless they also have the float. property). images with inline-block will also align left by default but will only take up space until the next image to the right or left, or until they reach either side of an element they are nested in.

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Richmond,

Thanks for replying. So if block takes up the entire width of the element it's in the it must center itself inside that element.

Jeff

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

OK, this is what I'm talking about. I've stripped it all pretty bar. You can see what I mean here. Nick Pettit | Designer

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

I had a look at the page and inspected the elements because the image with block was not doing what I had expected. I had not expected the top image to center align within it's bounding section by default. But I guess I was wrong to not expect it. I did not think it would center itself by default, but it sure does.