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 Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Nicholas Gabriel
Nicholas Gabriel
16,294 Points

On set display property of <a> to block, inside a li element, which is inline-block. Why didnt <a> start with new line.

<li style="display:inline-block"><a href="#">ice cream</a></li>
<li style="display:inline-block"><a style="display:block" href="#">donuts</a></li>
<li style="display:inline-block"><a href="#">tea</a></li>
<li style="display:inline-block"><a href="#">coffee</a></li>

Here why donuts didnt start with new line as its block element now ???

3 Answers

Steven Parker
Steven Parker
229,644 Points

That's what the "inline" part of "inline-block" means. It allows the element to share a line with it's neighbors.

A plain "block" element (which is the default for list items) would take up a whole line.

Nicholas Gabriel
Nicholas Gabriel
16,294 Points

Yes, that I got. But what about the display style of anchor element corresponding to "donuts". Its set as "block"

Steven Parker
Steven Parker
229,644 Points

Inside a containing element, it will take up a line relative to other content in the same container. It won't affect the alignment of the container itself.

The <a> is a child ofits parent <li> so it will only take up the full width of its parent container.

However, if you set <li> to inline the <a> will technically too line up side by side, this is because it is contained in its parent <li>.

I hope that made sense.

Nicholas Gabriel
Nicholas Gabriel
16,294 Points

One more finding. If i will add some text before the "donuts" anchor tag, let say, "test". The donuts part start with a new line after "test". Here "test" is the first content in parent element. But in the earlier case "donuts" was the first content.

<li style="display:inline-block"><a href="#">ice cream</a></li>
<li style="display:inline-block">test<a style="display:block" href="#">donuts</a></li>
<li style="display:inline-block"><a href="#">tea</a></li>
<li style="display:inline-block"><a href="#">coffee</a></li>

It may be because you forgot to put a closing </li> after your test. Try this:

<li style="display:inline-block"><a href="#" style="display: block">ice cream</a></li>

<li style="display:inline-block"><a style="display:block" href="#">test</a></li>

<li style="display:inline-block"><a style="display:block" href="#">donuts</a></li>

<li style="display:inline-block"><a href="#" style="display: block">tea</a></li>

<li style="display:inline-block"><a href="#" style="display: block">coffee</a></li>