CSS - Why do I need float for my span to show an image with fixed w & h?

Question

Look I have this code:
CSS:

<style>
span#logo {
    height: 80px;
    width: 222px;
    background: url(img/logo.png);
    /* If I take out this it would give my span 0x0px size */
    float: left;
}
</style>

HTML:

<span id="logo"></span>

Why does it happens? Why do I need to have the float for it to have shape?

you don't have display: block; is part of it – Keith Oct 08 '13 at 16:51 — Keith, Oct 08 '13 at 16:51

score 2 · Answer 1 · answered Oct 08 '13 at 16:52

2

You don't need float, you need anything to make your span not inline. You could (and probably should) just change the display to either block or inline-block.

answered Oct 08 '13 at 16:52

James Montagne

77,516
14
110
130

It would be inline-block, because with block it gives me a marginal error. – Federico Piragua Oct 08 '13 at 16:55
1

@ZathrusWriter IE7 does support `inline-block` for spans. – James Montagne Oct 08 '13 at 16:59

score 2 · Answer 2 · answered Oct 08 '13 at 16:54

SPAN element itself is dimension-less. It is as big as whatever you put into it. To make it dimensions-aware, you need to change its display property to block or inline-block. Its default display is inline, which gives you the behavior you experience.

span#logo {
    height: 80px;
    width: 222px;
    background: url(img/logo.png);
    display: block;
    // or: display: inline-block; zoom: 1; *display: inline;
}

score 1 · Answer 3 · edited May 23 '17 at 11:57

1

Floats are technically block-level elements, but they behave like inline elements in that they often don’t exist on a line of their own — the rest of your content will try to flow around a floated element.

For better understanding Read This

edited May 23 '17 at 11:57

Community

1
1

answered Oct 08 '13 at 16:56

vishalkin

1,175
2
12
24

CSS - Why do I need float for my span to show an image with fixed w & h?

3 Answers3