How to use the min-width property In CSS
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>w3wiki</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
How to Set the Fixed Width of a Span Element in CSS ?
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.