Does height and width not apply to span?

Question

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.

You might also want to check out http://stackoverflow.com/questions/2343989/how-to-set-height-property-for-span — Edan Maor, Mar 22 '10 at 09:36
Also check the standard, specifically http://www.w3.org/TR/CSS2/visudet.html#the-width-property and http://www.w3.org/TR/CSS2/visudet.html#the-height-property, which state the properties "Applies to: all elements but non-replaced inline elements, table rows, and row groups" — outis, Mar 22 '10 at 09:56

score 541 · Accepted Answer · edited Apr 02 '20 at 12:28

541

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 */
}

edited Apr 02 '20 at 12:28

Basheer AL-MOMANI

14,473
9
96
92

answered Mar 22 '10 at 09:33

11

Thanks, fixed it. I tried display:block before but inline block fixed it. – Kyle Mar 22 '10 at 09: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 '13 at 17:52
9

a better solution is to user display: inline-block – Anant Sep 06 '18 at 07: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 '20 at 08:02

score 39 · Answer 2 · answered Mar 22 '10 at 09:36

39

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.

answered Mar 22 '10 at 09:36

Isaac

10,668
5
59
68

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. – Brian Scott Mar 22 '10 at 09:43
3

The question provides no context to indicate that a div is inherently inappropriate semantically. – Isaac Mar 22 '10 at 09: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. – Brian Scott Mar 22 '10 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 '10 at 14:41

score 25 · Answer 3 · answered Jun 17 '16 at 08:05

25

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

display: inline-block; overflow: hidden;

answered Jun 17 '16 at 08:05

olleh

1,915
18
21

score 12 · Answer 4 · answered May 20 '13 at 19:43

12

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

span {display:block;}

answered May 20 '13 at 19:43

Touhid Rahman

2,455
21
22

15

I think `display: inline-block;` is better – 151291 Aug 11 '15 at 13:26
2

Doing this way you will change for all the spans, I'd recommend using a class. – Hola Soy Edu Feliz Navidad Nov 01 '18 at 13:15

score 9 · Answer 5 · answered Mar 27 '14 at 13:08

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

answered Mar 27 '14 at 13:08

Hamed Ali Khan

1,108
3
23
29

I keep seeing `overflow:hidden;` in this context. "Content is clipped, with no scrollbars" [says MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). Seems counterintuitive. What does it do here? – Bob Stein Feb 08 '17 at 17:10

score 8 · Answer 6 · answered Mar 22 '10 at 09:34

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.

answered Mar 22 '10 at 09:34

Edan Maor

9,772
17
62
92

score 6 · Answer 7 · answered Mar 22 '10 at 09:35

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.

answered Mar 22 '10 at 09:35

score 5 · Answer 8 · answered Nov 28 '21 at 09:36

5

Use this all problem solve way

Try it..

span.product__specfield_8_arrow
{
    display: inline-block;
}

answered Nov 28 '21 at 09:36

score 3 · Answer 9 · answered Jun 25 '19 at 13:19

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

score 0 · Answer 10 · answered Jul 22 '20 at 01:54

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.

score 0 · Answer 11 · answered Mar 10 '22 at 22:07

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">

Does height and width not apply to span?

11 Answers11

Linked

Related