Convert div to span with CSS

I have a few divs which makes a little bit too spacey between the footer and the body. So i wan开发者_如何学Ct to convert one div to a span. But when I do that, it messes the footer's content a bit up.

How can i do this and keep the styles that already have been defined for the footer?

Thanks in advance!

Edit

div.footer {
width: 986px;
margin: 0 auto;
padding-bottom:18px;
border: 0;
text-align: left;
color:#000000;
}

As you already know, the difference between a <div> and a <span> is just that one defaults to display:block; and the other to display:inline;. To make one act as the other, just set the display style to the other type.

However, you already said you tried this and it didn't achieve the effect you were looking for. There is another display property, which is less well known, but provides a half-way house between the two:

display:inline-block;

What it does is display it inline, but still with block-like properties. (This is basically how an <img> tag works by default).

Could this be the answer you're looking for?

To convert a div to a span, simply add:

.myDiv
{
   display: inline;
}

But I'm really not sure that this is the solution you're after.

Quote:

there are 2 divs next to eachother which creates a hugh gap between the body and the footerbody and the footer

Solutions:

• Remove empty div(s) from HTML
• Remove empty div(s) by adding display:none
• Reduce height of the div(s)
• Reduce margin or padding of the div(s)
• Set position:relative; top:-[yourownnumber]px to .footer

Try adding overflow:auto; to your span. Also add display:block;

If there is too much space between the footer and the body, have you looked at what the margins and paddings are on the affected divs? Does something have a height or a min-height that is making some of the content within the body taller than the natural end of the content? Firebug is a great tool for this.

Div is a block element. Other block elements are paragraphs, headings, lists, etc. Span is an inline element. Other inline elements are strong, image, anchor, etc. You still need the body to be contained in a block-level element.

How if add this:

position:relative /*optional*/
float:left;
left:0px;

I always do this before i know to use span when I first learn css I always do to my element content.