Inline elements have no height

A big truck squashing a uteIf you are ever doing CSS and your elements are not pusing other elements up and down the page, it is probably due to the fact that it is in an inline element. Block elements tend to take control of the page and push inline elements around. Inline elements are elements such as span and link elements. If you place a top or bottom margin or padding on these elements, it will have no effect. This can often be confusing for new developers.

A div is a block element and has the ability to have a top and bottom margin and padding. To make an inline element a block element we need to change the display property. Generally we also want the element to float to the left or right. This will turn our inline element into a block element. The benefit of floating the element is that the width of the element will still act as though it is an inline element. You could say an element that is a block element and also floated is a hybrid. It contains both qualities that block and inline elements contain.

.inline-element-to-block { display:block; float:left; }

You may have clearing problems after performing the above changes, but this is another story which we won't go into now. What you need to remember is inline elements do not understand height and cannot push other elements around.