Set span width and height not only fill its content

Question

I'm trying to set empty spans with height and width by css but the span only fills its content

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

How can I set the span element to have the width and height?

PD:divs works but are block elements I need inline elements

Hi, the width and height of inline element depends on its content. I think you need to set `display: inline-block;` in this situation! — AppleJam, Jul 27 '19 at 18:06

score 1 · Answer 1 · answered Jul 27 '19 at 18:09

In added display: inline-block to your code. This sets default width for empty span as well as it does not change lines, here it is:

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

score 0 · Accepted Answer · answered Jul 27 '19 at 18:25

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>

Set span width and height not only fill its content

2 Answers2