CODEWITHSUNDEEP
htmlcss
henrywright
henrywright

Reputation: 10240

How to give an empty element some width and height?

I have an empty element on my page that I'd like to give some width and height to.

Here is a jsfiddle to illustrate: http://jsfiddle.net/tzxv5zb3/

As you will see, I've tried giving the element a style attribute with some values for width and height. For example:

<span id="element-b" style="width: 100px; height: 20px; background-color: #555;"> </span>

However, this does nothing.

How to give my empty element (#element-b) some width and height?

Upvotes: 0

Views: 2359

Answers (4)

cgwyllie
cgwyllie

Reputation: 413

This is because a span is an inline element. For it to respect the width/height rules, you need to make it block or inline-block.

See: http://jsfiddle.net/tzxv5zb3/1/

Upvotes: 0

Katana314
Katana314

Reputation: 8620

Simple answer: Apply the "`display: inline-block;" style to the span.

For old versions of IE, you will need to apply "zoom: 1;" INSTEAD of the inline-block property. I'm sorry to say I can't recall what the highest version you need to do this to is, but I know you need it for 7.

Upvotes: 0

Reinier Kaper
Reinier Kaper

Reputation: 1129

spans are inline elements by default, which give you no option to manipulate their dimensions. Try the following:

<span id="element-b" style="display: inline-block; width: 100px; height: 20px; background-color: #555;"></span>

Upvotes: 5

JNF
JNF

Reputation: 3730

span is an inline element. Try using div, or else add

display:block;

to your style

Example in your fiddle

Upvotes: 1

Related Questions