How to Set HTML Span Width
Introduction
The span tag is an inline element and it is used to target specific text or sentences. The span tag is often not used alone but used within an element. You may be confused about the span tag so in this article, I will cover the span tag and how to set HTML span width.
What is a span tag
span stands for space, so in HTML the span tag is always used within other elements. A span tag is always dependent on another element. For ex, we have the text “Span is important” inside a <div> element. When you want to style only the word “important”, you should give that word in the <span> tag.
Example:
<p>The Span Tag in <span style="color:red;">important</span>
in HTML</p>
In the above code, we have some text inside the <p> tag but the word “important” is just inside the <span> tag. We set the red font color only for the span tag, so the “important” is displayed in red color.
How to set span width
- You can use the CSS “width” property to specify the width of the span.
- Before we change span to width we need to convert span from inline to block element because inline element defaults to fullwidth so we need to change it to block or inline-block. An element can be converted from inline to block by using the CSS “display” property and giving “value” as a block.
- Then we can use the width property and give your desired size as a value.
Example:
<html>
<head>
<style type="text/css">
span{
display: block;
width:100px ;
border : 1px solid black;
}
</style>
</head>
<body>
<span>The span tag is displayed</span>
</body>
</html>
In the above code, we have a <span> tag. In the style tag, we have styling for the span tag and it has a display: block for converting span from inline to block element. Set width to 100px and border to 1px black. So, see the given output the span tag has a width of 100px.