CSS min-width Property

CSS min-width property specifies the minimum width of an element’s content area. It basically sets a lower bound on element’s width.

The min-width will only be applied if the content of the element is smaller than the specified min-width. Otherwise, the min-width property has no effect on the element. Refer to the example below:

Example:

span{
  min-width: 300px;
}

The min-width property overrides the width property. That is, if the value of the width property is lower than the min-width, the width property uses the value specified by the min-width property. This represents that the element’s width can never be less than its min-width. Refer to the example below:

Example:

span{
  width: 5px;
  min-width: 300px;
}

CSS Syntax

The min-width property has the below syntax:

min-width: length|%|initial|inherit;

Property Values

The min-width property accepts the following values:

lengthThe default value is 0. It specifies the min-width in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
%Specifies the min-width in percentage(%). The percentage value is calculated from the total width of the containing element.
initialSets the min-width property to its default value(0).
inheritInherits the min-width property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.minWidth = “300px”;