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 Basics (2014) The Box Model Display Values

Fung How Lim
Fung How Lim
2,402 Points
Posted by Fung How Lim
Fung How Lim
2,402 Points

Can i still achieve the same result if i style the navigation box using display:block instead of display:inline-block?

Hi there,

This is Steve, a coding newb.

About inline-block, inline, and block; I want to find out if, using the same padding, margin, border-style, as stated in the video - can i still achieve the same result if i use display:block instead of display:inline-block?

Since "find out more" and "see the wildlife" are both situated at a different space (one is top the other is bottom), isn't it correct for me to assume that display:block will acquire the same result too?

A little confused about this. Would really appreciate any advice given. Thank you so much.

Best, S.

2 Answers

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Well I guess the easiest way to find out would be to try, but technically an inline-block element can get pretty much all the same properties as block element. It's just meant to be used on a line with other inline or inline-block elements.

Fung How Lim
Fung How Lim
2,402 Points
Fung How Lim
Fung How Lim
2,402 Points

Hi Iain S,

Yeah.. i'm sure trying it out is the best thing to do. I asked because I wanted to understand the logic behind it. Like, if block can be used, why inline-block?

Of course i asked after i did my research online, yet it didn't turn out well as I do not understand the resources of w3school.

This is kinda tough especially for noobs, like me. I do understand everything else besides this one thing. so your advice means a lot to me. would also appreciate your patience in this too. thanks.

Best, S.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I don't think the differences make much sense if you do a lot of extra styling and then just switch between block and inline-block, particularly if the elements are floated. The bigger difference is when you go between inline and inline-block, since inline-block will still be positioned on the line, but then can use other properties that normally only block elements can (particularly height and width).

If you do some research on inline vs inline-block, you might find more content.

Otherwise here's an article that focuses more on inline-block itself: https://designshack.net/articles/css/whats-the-deal-with-display-inline-block/