315

Total noob question, but here.

CSS

.product__specfield_8_arrow {

    /*background-image:url(../../upload/orng_bg_arrow.png);
    background-repeat:no-repeat;*/
    background-color:#fc0;
    width:50px !important;
    height:33px !important;
    border: 1px solid #dddddd;
    border-left:none;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-bottom-left-radius:0px;
    border-top-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-topleft:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-top-left-radius:0px;
    margin:0;
    padding:2px;
    cursor:pointer;
}​​​

HTML

<span class="product__specfield_8_arrow">&nbsp;</span>​

Fiddle

Basically I'm trying to emulate a button, make a span (or something) look like a button next to an input field that actually doesn't need to be one because of an auto fill generator that generates errors onEnter. Thought this'd be a quick fix for now but obviously not.

Thanks.

2

12 Answers 12

542

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 */
}
4
  • 11
    Thanks, fixed it. I tried display:block before but inline block fixed it.
    – Kyle
    Mar 22, 2010 at 9:38
  • 29
    That's the problem. If display: block is specified, span stops to be an inline element and an element after it appears on next line. I need an element which is inline, but could be of desired width.
    – Paul
    Mar 21, 2013 at 17:52
  • 9
    a better solution is to user display: inline-block
    – Anant
    Sep 6, 2018 at 7:44
  • 4
    I love you from the future! (your post is more than 10 years old but helped me at this future time in relation to the date of post !), I love the past for bringing me brilliant answers. I love you!
    – Thanasis
    Dec 20, 2020 at 8:02
40

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.

4
  • 9
    a div is not a semantic replacement for a span. A span is a textual container whereas a div is a layout container. Applying an inline-block style like Developer Art has suggested is the correct answer. Mar 22, 2010 at 9:43
  • 3
    The question provides no context to indicate that a div is inherently inappropriate semantically.
    – Isaac
    Mar 22, 2010 at 9:45
  • 1
    Actually, reading the op's markup it actually looks like the element in question is being used to simply display a background image. In this case a div would actually be more appropriate. -1 removed from Isaac's original comment. Mar 22, 2010 at 15:15
  • 1
    Further, I tried to use a div before switching to span, it always displays under the previous div.. So went with Span :)
    – Kyle
    Mar 25, 2010 at 14:41
25

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

display: inline-block; overflow: hidden; 
12

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

span {display:block;}
2
  • 15
    I think display: inline-block; is better Aug 11, 2015 at 13:26
  • 2
    Doing this way you will change for all the spans, I'd recommend using a class. Nov 1, 2018 at 13:15
9

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

1
  • I keep seeing overflow:hidden; in this context. "Content is clipped, with no scrollbars" says MDN. Seems counterintuitive. What does it do here?
    – Bob Stein
    Feb 8, 2017 at 17:10
8

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

Try adding a display: block to your span.

6

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.

6

Use this all problem solve way

Try it..

span.product__specfield_8_arrow
{
    display: inline-block;
}
4

span {display:block;} also adds a line-break.

To avoid that, use span {display:inline-block;} and then you can add width and height to the inline element, and you can align it within the block as well:

span {
        display:inline-block;
        width: 5em;
        font-weight: normal;
        text-align: center
     }

more here

0

There are now multiple ways to mimic this same effect but further tailor the properties based on the use case. As stated above, this works:

.product__specfield_8_arrow { display: inline-block } 

but also

.product__specfield_8_arrow { display: inline-flex } // flex container will be inline
.product__specfield_8_arrow { display: inline-grid } // grid container will be inline
.product__specfield_8_arrow { display: inline-table } // table will be inline-level table

This JSFiddle shows how similar these display properties are in this case.

For a relevant discussion please see this SO post.

0

The way I deal with this is to use a borderless, read-only input tag and then you can set the attributes as desired:

 <input  type="text" readonly 
   style="border:none; background-color: transparent; width:200px; margin-top:10px; padding-left: 10px;" 
      [value]="statusMessage">
0

Actually span is an inline element. So height and width will not work but, if you have your span in a container and it has display flex then it will.

div class

.container {
  display: flex;
}

.product__specfield_8_arrow {
  /*background-image:url(../../upload/orng_bg_arrow.png);
        background-repeat:no-repeat;*/
  background-color: #fc0;
  width: 50px !important;
  height: 33px !important;
  border: 1px solid #dddddd;
  border-left: none;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
  -moz-border-radius-bottomleft: 0px;
  -moz-border-radius-topleft: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  margin: 0;
  padding: 2px;
  cursor: pointer;
}
<div class="container">
  <span class="product__specfield_8_arrow">&nbsp;</span>

  </span>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.