Clickable areas in the header links

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.

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!!!

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!