min-width
Quick Summary for min-width
min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.
Code Usage for min-width
<pre class="brush: css notranslate"><code><span class="token comment">/ <length> value /</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 3.5em<span class="token punctuation">;</span> <span class="token comment">/ <percentage> value /</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span> <span class="token comment">/ Keyword values /</span> <span class="token property">min-width</span><span class="token punctuation">:</span> max-content<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> min-content<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token function">fit-content</span><span class="token punctuation">(</span>20em<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">min-width</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
More Details for min-width
min-width
The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.
The element's width is set to the value of min-width whenever min-width is larger than max-width or width.
Syntax
/* <length> value */ min-width: 3.5em; /* <percentage> value */ min-width: 10%; /* Keyword values */ min-width: max-content; min-width: min-content; min-width: fit-content(20em); /* Global values */ min-width: inherit; min-width: initial; min-width: revert; min-width: unset; Values
<length> Defines the min-width as an absolute value.
<percentage> Defines the min-width as a percentage of the containing block's width.
auto The browser will calculate and select a min-width for the specified element.
max-content The intrinsic preferred min-width.
min-content The intrinsic minimum min-width.
fit-content(<length-percentage>) Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)).
Formal definition
| Initial value | auto |
|---|---|
| Applies to | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length, percentage or calc(); |
Formal syntax
auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>)where
<length-percentage> = <length> | <percentage>
Examples
Setting minimum element width
table { min-width: 75%; } form { min-width: 0; } Specifications
| Specification |
|---|
| CSS Box Sizing Module Level 3 # min-size-properties |
See also
width, max-width The box model, box-sizing Last modified: Nov 19, 2021, by MDN contributors
Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Русский中文 (简体) Change languageAdd Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
