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

Enemuo Felix
Enemuo Felix
1,895 Points
Posted by Enemuo Felix
Enemuo Felix
1,895 Points

Display property

What's the difference between inline and inline-block property apart from the fact that the former can't respond to margin value? An explanation with an actual code will be very much appreciated

1 Answer

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

Other than top and bottom margins & paddings, the major difference is that "inline" elements are "flowed" and have no specific dimensions, where "inline-block" elements can have a specific width and height on the element.

Here's a code example:

code.html 
Here is an example of an <span class="flow">inline</span> element,
and here is an example of an <span class="box">inline-block</span> element.
style.css 
.flow {
  display: inline; /* the default for span */
  width: 100px;    /* these dimensions will be ignored */
  height: 100px;
  background: skyblue;
}
.box {
  display: inline-block;
  width: 100px;    /* these dimensions will be used */
  height: 100px;
  background: skyblue;
}