How to Set the Fixed Width of a Span Element in CSS ?

Last Updated : 29 Jul, 2024

Setting a fixed width of a span element is useful when we need to control the size of a specific inline element. The span element is mostly used in styling specific parts of text and other inline elements. There are various approaches to setting a fixed width of a span element in CSS including, width property, max-width property, and min-width property.

Syntax:

span {
    width: 100px; /* replace 100px with your desired width */
}
span {
    max-width: 200px; /* replace 200px with your desired maximum width */
}
span {
    min-width: 50px; /* replace 50px with your desired minimum width */
}

Table of Content

Using the width property
Using the max-width property
Using the min-width property

Using the width property

The width property is straightforward and sets the exact width of the element. Set the property width: 250px to the <span> element.

Example 1: Illustration of styling span element using width property to set fixed width.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
				   initial-scale=1.0">
    <style>
        h2,
        h3 {
            color: green;
            text-align: center;
        }

        span {
            width: 250px;
            border: 1px solid #000;

            /* ensure inline-block for width to take effect */
            display: inline-block;
        }
    </style>
    <title>Fixed Width - width Property</title>
</head>

<body>
    <h2>GeeksforGeeks</h2>
    <h3>Setting the fixed width of a Span element
        using the width Property
    </h3>
    <p>This is some text with a
        <span>fixed width</span>
        span element.
        HTML stands for HyperText Markup Language.
        It creates a complete website structure of
        web pages. HTML is a combination of Hypertext
        and Markup language. Hypertext defines the
        link between the web pages and markup language
        defines the text document within the tag. This
        HTML Tutorial provides basic to advanced concepts
        for beginners and professionals.
    </p>
</body>

</html>

Output:

Using the max-width property

The max-width property in CSS allows the element to increase till it reaches a specified maximum width but won't exceed that width. So, it becomes fixed after that particular width.

Example2: Illustration of styling span element using max-width property to set fixed width.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
				   initial-scale=1.0">
    <style>
        h2,
        h3 {
            color: green;
            text-align: center;
        }

        span {
            max-width: 250px;
            border: 1px solid #000;

            /* Ensure inline-block for max-width to take effect */
            display: inline-block;
        }
    </style>
    <title>Fixed Width - max-width Property</title>
</head>

<body>
    <h2>GeeksforGeeks</h2>
    <h3>Setting the fixed width of a Span Element Using
        the max-width property</h3>
    <p>This is some text with a
        <span>max-width span element.</span>
        HTML is a markup language used by the browser to
        manipulate text, images, and other content, in
        order to display it in the required format.
        HTML was created by Tim Berners-Lee in 1991.
        The first-ever version of HTML was HTML 1.0, but
        the first standard version was HTML 2.0, published
        in 1995.
    </p>
</body>

</html>

Output:

Using the min-width property

The min-width property in CSS sets the minimum width for the element. This allows to expand if the content needs more space than the specified minimum.

Example3: Illustration of styling span element using min-width property to set fixed width.