CODEWITHSUNDEEP
csshtml
X10nD
X10nD

Reputation: 22050

width and height for a span does not show up unless a text is entered

I have a <span id="some"></span> and the css is

#some{
      background-color:#000; width:150px; height:50px; 
}

The width and height does not show unless something is entered. How can i fix this?

Upvotes: 15

Views: 20345

Answers (7)

e18r
e18r

Reputation: 8201

border: solid transparent;

works on Chrome and Firefox

Upvotes: 0

vipin goyal
vipin goyal

Reputation: 711

One can make span width and height working even without setting display as block by setting position value as absolute to it. 

.green-box{
      background-color:gold; 
      position:absolute;
      width:300px;
      height:100px;
      border: 2px solid silver;
}

Checkout this link for more := https://jsfiddle.net/vipingoyal1000/oa2ssb19/

Upvotes: 1

user3613331
user3613331

Reputation: 121

Using display:block; it will work perfectly.

Thanks Rex

Upvotes: 0

Ivan
Ivan

Reputation: 1796

As everyone else mentioned span is inline element, you either need to make it block element (using display:block) or to use block element (div) in its place. In order to better understand inline and block elements, as well the whole html/css rendering model, I suggest you read http://www.w3.org/TR/CSS2/visuren.html.

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630627

You can't give a height/width to an inline element, it's sized by it's content, but you can give it display: inline-block; like this:

#some{
  background-color:#000; width:150px; height:50px; display: inline-block;
}​

See an example here, note that IE7 in particular won't handle this in some situations, so display: block; would work there (but honestly, why not just use a <div> then?)...but keep in mind inline-block is in the flow, whereas block kicks everything down a line.

Upvotes: 15

Sinan
Sinan

Reputation: 11563

span is an inline element, so without telling browser that its display property as block what you do won't work out.

So in brief:

#some{
  background-color:#000; 
  width:150px; 
  height:50px; 
  display: block;
}

Hope it helps, Sinan

Upvotes: 23

user11977
user11977

Reputation: 1793

A common solution is using &nbsp; in the span tag. (I'm assuming you want to make it display:block; as well?)

Upvotes: 0

Related Questions