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 being0px
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
orheight
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 :
div { top: 10px; left: 20px; position: absolute; color: #FFF;}
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="image" />
<div> <H1>Text </H1></div>
Related Topics
Vuetify: Fit V-Image Within the Screen Size
Footer At Bottom of Page or Content, Whichever Is Lower
Which Characters Are Valid in CSS Class Names/Selectors
Set Opacity of Background Image Without Affecting Child Elements
How to Hide an Element When Printing a Web Page
Css Reset - What Exactly Does It Do
Difference Among Col-Lg-*, Col-Md-* and Col-Sm-* in Bootstrap
How to Vertically Center ≪Div≫ Inside the Parent Element With Css
How to Add Border in My Clip-Path: Polygon(); CSS Style
How to Reverse an Animation on Mouse Out After Hover
How to Avoid Extra Blank Page At End While Printing
How to Get Div Height to Auto-Adjust to Background Size
How to Transition Height: 0; to Height: Auto; Using Css
Why Isn't It Possible to Combine Vendor-Specific Pseudo-Elements/Classes into One Rule Set
How to Identify Unused CSS Definitions from Multiple CSS Files in a Project