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
203,995 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
203,995 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>