Does Height and Width Not Apply to Span

Does height and width not apply to span?

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

css: min-width and min-height not working for span?

You should set display:inline-block or display:block for span. Because span's has display:inline as default. Can't set height or width for inline elements.

#test {  display:inline-block;  min-width: 300px;  min-height: 100px;  background-color: #fa0;}
<span id='test'>Hello</span>

Set span width and height not only fill its content

You don't have to add span to get inline-block property.

You Can achieve it with display: inline-block.

.widget {   display: inline-block;}
 <div class="container">      <div id="widgets-container">           <div class="widget" name="widget1" style="background-color: #CCFFFF;width:300px;height:200px"></div>           <div class="widget" name="widget2" style="background-color: #FF8000;width:300px;height:200px"></div>      </div>   </div>

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

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

span should have width and height of child img

It seems if an element with display: inline-block; has a child node that comes with a percentage-based width it is automatically switched to display: block;
internally, which kind of makes sense because the percentage relates to the width of the parent element (and not to the 100% dimensions of the image) (which basically has width: min-content;, making it a circular dependency). If you set the images' width to a fixed width, it works as you expect, or simply don't specify a width at all.

Imagine, your current definition basically does this:

Dad: I'm as wide as you, my child.

Child: I'm half of your width, dad!

Dad: But wait, that cuts me down to half of my width because I exactly
engulf you.

Child: Cmon dad, that leaves with only half as much space
as before. I need to shrink!

Dad: Don't shrink, or this whole thing
will start over and we will both end up being 0px wide!

$('#toggleInline').click(function() { $('#removed').removeAttr("style");});
$('#toggleBlock').click(function() { $('#removed').removeAttr("style"); $('#removed').css('display', "block");});
$('#toggleInlineBlock').click(function() { $('#removed').removeAttr("style"); $('#removed').css('display', "inline-block");});
img {  /* just because the sample image is too large */  width: 50%;}
span.removed { border: 3px solid #f00; background: repeating-linear-gradient( 45deg, #f00, #f00 10px, #fff 10px, #fff 20px );}
span.removed img { opacity: 0.85;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p><span class="removed" id="removed">  <img src="https://images.pexels.com/photos/1036371/pexels-photo-1036371.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></span></p><div style="margin-top: 15px">  <button id="toggleInline">    display: inline (default)  </button>
<button id="toggleBlock"> display: block </button>
<button id="toggleInlineBlock"> display: inline-block </button></div>

CSS - width not honored on span tag

display: block will not help you here because when float is activated, the elements is automatically switched to block mode, whatever its initial mode, so your width should work.

The problem may be with the empty <span> tag which might not be rendered because of some obscure rule I cannot remember. You should try preventing your span from being empty, maybe by adding a   if the content is empty.

padding still exists when height and width of span are 0 with only padding-left set to 20px

The box-sizing property only applies to elements that accept a width or height. By default, a span element is a non-replaced inline element, which means that the width property doesn't apply to it, thus the box-sizing property doesn't apply to it either.

For reference, here is a relevant link to the specification regarding which elements the box-sizing property applies to:

3. Box Model addition - 3.1. box-sizing property

Applies to: all elements that accept width or height

Here is the relevant quote and link to the specification regarding the width property and non-replaced inline elements:

10.2 Content width: the 'width' property

This property [width] does not apply to non-replaced inline elements. The content width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats.

Therefore, if you change the display property of the span element to inline-block or block, then the element won't appear (as you seem to be expecting):

* {  margin: 0;  padding: 0;  box-sizing: border-box;}span {  padding-left: 25px;  display: inline-block;  background: #f00;}
<span></span>

Not able to change span height and width inside image tag

First, span is a single line element. So no height.

Second, image is not : <img> </img>

Image tag is a single tag <img />

Try using a div instead of the span. And may be add span within it.

span is by default an inline element which cannot take width and height properties but you may use display: block; or display: inline-block; to set height/width to it.

Snippet to overlay span over image :