CODEWITHSUNDEEP
htmlcss
cop77
cop77

Reputation: 79

inline-block and block in list

Okay I am a newbie regarding CSS and while during a tutorial I got completely lost. As far as I know a block element takes up a whole line. And an inline element only takes up the width and height of the element and an inline-block works like an inline element but here you can set width and height.

Okay and now the question. In the tutorial it makes an unordered list:

header nav ul li {
display: inline-block;
padding: 0;
}

There are 5 elements in the list. Now 4 of the elements is text like "Menu", "Contact us" etc. but one element in the list should be the logo image. Now to add the logo I need to do this:

header nav ul li#logo a:link {
display: block;
width: 300px;
height: 260px;
background: url('images/logo.png') center center no-repeat;
}

But what I don't get is that I first make the elements in the list to inline-block elements (which makes sense cause I want them next to each other and one of them is an image.) But why in the world do I have to turn the element in the list that I want to contain the logo image into a block element? First of all I thought it would take up the whole line (but the elements are still next to each other) and second, I already turned the elements in the list into inline-block elements? Anybody who know the answer?

Upvotes: 0

Views: 1459

Answers (1)

Amr Labib
Amr Labib

Reputation: 4073

Considering the few points below you should get it why the anchor has display: block

1- The display:block is set to the anchor which is inside the li... not directly to the li itself.

Thats why its still showing all li next to each other because you changed one of the inner elements inside it to block not the li itself.

2- The default display property of anchor is inline ... this means that you don't have control on width and height.

3- To be able to show background-image inside anchor you will have to set a specific width and height and thats why the display is changed from inline to block to be able to control width and height

BTW you can also use inline-block with the anchor and it will work

Upvotes: 1

Related Questions