There are many occasions where you want to display some text in a span, inside a paragraph or a list, with some specific width and height. By default <span> is an inline element, which means, it does not have a width or height. So setting the CSS attributes width and height on <span> will not work. Following example demonstrates this problem
<html>
<body>
<style type="text/css">
.my-span
{
color:red;
border:1px solid gray;
width:300px;
}
</style>
<p>Hello there <span class="my-span">whats</span> up??</p>
</body>
</html>
In order to give a height and width to a span, you have to convert it to a block level element. Setting the style as "display: inline-block" will make it a block element with width and height, still displaying as inline element. Following example demonstrate this
<html>
<body>
<style type="text/css">
.my-span
{
color:red;
border:1px solid gray;
width:300px;
display:inline-block;
}
</style>
<p>Hello there <span class="my-span">whats</span> up??</p>
</body>
</html>
