How to Set the Fixed Width of a Span Element in CSS ?
Last Updated :
19 Feb, 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 */
}
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:
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:
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.
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 {
min-width: 180px;
border: 1px solid #000;
/* Ensure inline-block for min-width to take effect */
display: inline-block;
}
</style>
<title>Fixed Width - min-width Property</title>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>Setting the fixed width of a Span element
using the min-width Property
</h3>
<p>This is some text with a
<span>min-width span element.</span>
HTML stands for HyperText Markup Language. It is
used to design web pages using a markup language.
HTML is a combination of Hypertext and Markup
language. Hypertext defines the link between web
pages. A markup language is used to define the
text document within the tag which defines the
structure of web pages. This language is used
to annotate (make notes for the computer) text so
that a machine can understand it and manipulate
text accordingly.
</p>
</body>
</html>
|
Output:
Output
Share your thoughts in the comments
Please Login to comment...