Width and Height for a Span Does Not Show Up Unless a Text Is Entered

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

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

The background image in the span won't show without any text in the span tag

Because spans default to inline elements that don't have a width or height. Change the CSS to:

span {
    display:inline-block;
    width:30px;
    background-image:url("http://gifsoup.com/web/images/soc4.gif");
    height:30px;
}

jsFiddle example

By changing the display from inline to inline-block you can set the width and height of the span.

Issue with setting width of span tag

It's because inputs have default browser values like writing-mode & appearance and span elements are not.

If you give css to span like

span {
  appearance: auto;
  -webkit-writing-mod: horizontal-tb;
  width: 10%;
}

it will be works without change display property.

Span tag height is not adjusted to child input tag

I think, you could use the css and html like this:

 <style>
  body{
   font-family:Arial,Tahoma,sans-serif;
   font-size:0.7em;
  }
   input {
   font-size:100%;
   border:1px solid blue;
   box-shadow:3px 3px 3px #888;
   }
  </style>

 <body>

    <input type="text"/>
 </body>

Just put the border and box-shadow into the input-tag and you could remove the span-tag.

When window is resized, span element not getting its width

The CSS property display:inline does not accept widths and heights. Change this to inline-block to solve your issues.

.contact_section .contact_form input[type="text"], .contact_section .contact_form input[type="email"]{
    border: 1px solid black;
    margin: 15px 0;
    font-size: 16px;
    padding: 3px 5px;
    text-align: center;
    width: 30.2%;

    display: inline-block;

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

Reference: display:inline resets height and width

CSS fixed width in a span

ul {  list-style-type: none;  padding-left: 0px;}
ul li span {  float: left;  width: 40px;}

<ul>  <li><span></span> The lazy dog.</li>  <li><span>AND</span> The lazy cat.</li>  <li><span>OR</span> The active goldfish.</li></ul>

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.

Wrap entire span on new line if doesn't fit

The <span> tag is inline by default, so the text inside will break when wrapping happens. You can set it to display: inline-block so that it renders as a whole block also remains inline level. Note, wrapping may still happen but only if the text length exceeds the parent container.

.post-short-meta-container span {
  ...
  display: inline-block;
}

display: inline-block The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would) - MDN

And for the layout you're trying to achieve, you can wrap the text "Read more" into a <a> tag, and set the button link style on it instead of the table cell, see the updated demo below.

jsFiddle

.post-short-footer {  display: table;  width: 100%;}.read-more-post {  height: 100%;  display: table-cell;  vertical-align: middle;  width: 20%;  text-align: center;}.read-more-post a {  white-space: nowrap;  border: 1px solid #3b9be5;  padding: 0.6em 0.6em;  border-radius: 0.3em;  display: block;}.post-short-meta-container {  display: table-cell;  padding-left: 1em;  width: 80%;  line-height: 100%;  vertical-align: middle;  height: 100%;}.post-short-meta-container span {  display: inline-block;  padding: 0.3em;  margin: 0.3em;  border: 1px dotted red;}

<div class="post-short-footer">  <div class="read-more-post">    <a href="#">Read more</a>  </div>  <div class="post-short-meta-container">    <span>Some text here</span>    <span>Some text here</span>    <span>Some text here</span>    <span>Some text here</span>    <span>Some text here</span>  </div></div>

Width and Height for a Span Does Not Show Up Unless a Text Is Entered