How to Set Height Property for Span

How to set height property for SPAN

Give it a display:inline-block in CSS - that should let it do what you want.

In terms of compatibility: IE6/7 will work with this, as quirks mode suggests:

IE 6/7 accepts the value only on elements with a natural display: inline.

How to fit the div height to the span height

If you remove the height and width from your div and also take out the absolute positioning from the span you get the result you want.

.headerDesc {
    background-color: #4d2765;
    margin: 0 -8px;    
}
.headerDesc span {
    padding: 5px;  
    color: white;
    font-family: 'Arial', sans-serif;
    letter-spacing: 1px;
}

If you want to change the styling on other devices you should use media queries. Generally it is a bad idea to use the height property.

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

Increasing height in span

Split up your first CSS rule like this:

.aaa {
  display: flex;
}

.aaa span {
  padding: 20px;
  font-size: 1.6em;
}

The flex property needs to be assigned to the container, not to the spans. And float isn't necessary.

.aaa {  display: flex;}
.aaa span {  padding: 20px;  font-size: 1.6em;}
.bbb {  width: 50%;  text-align: left;  color: black;  background: red;}
.ccc {  width: 30%;  text-align: center;  background-color: green;}

<div class="wrapper">  <div class="aaa"><span class="bbb">Hello hello hello hello hello Hello hello hello hello hellotitle titletitle titletitle titletitle titletitle titletitle title</span>    <span class="ccc">12345</span>  </div></div>

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>

Changing the height of a span element

You can also use height.

span {  border-bottom: 1px solid red;  display: inline-block;  line-height: 20px;}

Does anyone see a way to <span>reduce</span> the height of the span element so the bottom border is closer to the word?

How to make a grid span the remaining height of the page

I'm assuming that your page height is the view height, which you can only use w/ modern browsers. See view height

Basically what we're doing here is we already know how high our footer and header are going to be (in the fiddle i just set it to 50px each). Then we use the calc CSS property to set the view height (vh) to 100% - 100px (meaning the footer and header's height put together (50+50 = 100)

Check the fiddle

<div id="main-body">
    <div class="header"></div>
    <div class="content clearfix">
        <div class="a">1</div>
        <div class="a">2</div>
        <div class="a">3</div>
        <div class="a">4</div>
    </div>
    <div class="footer"></div>
</div>

* {
    box-sizing: border-box;  /* add for browser prefixes */
}

#main-body {
    height: 100%;
    overflow: hidden;
}
.header, .footer {
    background-color: blue;
    height: 50px;
}
.content .a {
    height: calc(100vh - 100px);
    background-color: red;
    width: 25%;
    float: left;
}

.clearfix:after {
    content: "";
    clear:both;
    display:table;
}

Note that you'll also need the viewport meta tag in your <head> for this to work.

<meta name="viewport" content="width=device-width, initial-scale=1">

OP added the he would like the ability to center the text within these content divs

<div id="main-body">
    <div class="header"></div>
    <div class="content clearfix">
        <div class="a"><p>1</p></div>
        <div class="a"><p>2</p></div>
        <div class="a"><p>3</p></div>
        <div class="a"><p>4</p></div>
    </div>
    <div class="footer"></div>
</div>
#main-body {
    height: 100%;
    overflow: hidden;
}
.header, .footer {
    background-color: blue;
    height: 50px;
}
.content .a {
    height: calc(100vh - 100px);
    background-color: red;
    width: 25%;
    float: left;
    position: relative;
}

.content .a p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.clearfix:after {
    content: "";
    clear:both;
    display:table;
}

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>

How to Set Height Property for Span