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   lt span class  product  specfield 8 arrow  gt  amp nbsp  lt  span gt     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

User · Answer

Inspired from  Hamed  I added the following and it worked for me   display  inline-block  overflow  hidden

User · Answer

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

User · Answer

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

User · Answer

spans are by default displayed inline  which means they don t have a height and width   Try adding a display  block to your span

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

[css] Does height and width not apply to span?

Examples related to css

Examples related to html

Examples related to width