Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does height and width not apply to span?

Tags:

html

css

width

Span is an inline element. It has no width or height.

You could turn it into a block-level element, then it will accept your dimension directives.

span.product__specfield_8_arrow
{
    display: inline-block; /* or block */
}

Try using a div instead of the span or using the CSS display: block; or display: inline-block;span is by default an inline element which cannot take width and height properties.


Inspired from @Hamed, I added the following and it worked for me:

display: inline-block; overflow: hidden; 

Span takes width and height only when we make it block element.

span {display:block;}

As per comment from @Paul, If display: block is specified, span stops to be an inline element and an element after it appears on next line.

I came here to find solution to my span height problem and I got a solution of my own

Adding overflow:hidden; and keeing it inline will solve the problem just tested in IE8 Quirks mode


spans are by default displayed inline, which means they don't have a height and width.

Try adding a display: block to your span.


Span starts out as an inline element. You can change its display attribute to block, for instance, and its height/width attributes will start to take effect.