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 CSS Layout Techniques Display Modes Inline-Block Formatting

Kieran Baybutt
Kieran Baybutt
7,119 Points

So why would you ever use just 'inline' then and not 'inline-block'?

q

3 Answers

Pavle Lucic
Pavle Lucic
10,801 Points

There are situations when you want to use inline value.

Example is , if you have some text and want to color the particular word. For colored word you will wrap him in span element (which is by default inline element). Doing that you will not disrupt text style, by changing span element to inline block.

            <p>Some text needs to be <span>colored</span> inside this paragraph</p>
            ```

Thanks

HI, im not 100% sure of inline, so i expect to be wrong but what i can take from inline-block and take the logic of it into my words and opinion , i think i might come up with accurate answer.

For example:

We have a Navigation bar. It look like this :

Home
About Us
Our Products
Contact Us

When you put inline it goes in line . So like this :

Home | About Us | Pur Products | Contact Us

If you display it on inline-block, it will to exactly the same. But it will take like no room.

Basicaly when you put a block, it takes like a invisibile square about it. If you hit a tab on a nav bar with text only, it will select a box , but if you put it inline. it will just put it inline and it will select box, but closer to the text i believe.

Its not much idfference i thikn. But i might be wrong. But thats why i think after my little experience with it.

It might be also that inline is older than inline-block : p

Kyle Scott
PLUS
Kyle Scott
Courses Plus Student 2,316 Points

"Inline block" allows you to do a width, top & bottom margin, were as "Inline" wont allow you to do that. Some webpages may not require you to use a width, top &/or bottom margin so in that case you would use just "Inline" .Not the best at describes this answer but hope this helps. Aurelian you do have a good point!