Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

This is a good and concise explanation. :)

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.

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

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

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.