CSS CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Clickable areas in the header links

Hi everybody, I have one trouble! Why Guil set display:block to .name a and .main-nav a? Couldn't he use display:inline-block? Shouldn't it work as same as display:block? I cannot understand the difference!!

Thanks in advance

4 Answers

Kristian Egebæk-Carlsen
Kristian Egebæk-Carlsen
8,902 Points

If he sets the links and to inline-block, he would not be able to expand the box around the link. If you notice the video, when he sets the top and bottom padding on an inline object, it will not work. But when he change the links to display:block; the white area around the link expands on the top and bottom.

Kristian Egebæk-Carlsen
Kristian Egebæk-Carlsen
8,902 Points

Some styles does not apply to inline elements, nor if they are inline-block. Thats why you separate the links and display them as blocks only.

But doesn't inline-block work as block one? So which is the difference between these two? Guil said the inline-block is the same as inline but you can style it as the block one! Mumble mumble!!!

Ricardo Saito
Ricardo Saito
6,689 Points

Yes, Luca, inline-block elements can be styled the same way as block elements. In this case, the difference between using either of them is the initial size of the element:

-If you use "display: inline-block", the element will take the size of its content (in this case, the links' text), so you might need to add further CSS declarations to stretch it, especially if the parent element has fixed width or height values;

-If you use "display: block", the element automatically becomes the same size of its parent, which is much better for expanding a link's area.

This difference is more noticeable in the "name" element, because it has a fixed width of 240px. If you change the display value to "inline-block", you can see how there's a little space in the left and right sides of the box that doesn't become clickable.

Peace!

ywang04
ywang04
6,748 Points

Thanks for your answers. It is clear to me.