CSS - min-width Property
The min-width property is used to set an lower bound on the width of an element.
Possible Values
<length> − Any length unit. The element can never have a value for width which is lower than this value. Default value is 0.
<length> − It sets the element's minimum width in the percentage of the width of the containing block.
initial − Sets the value of min-width to its default value.
inherit − The value of min-width is inherited from its parent value.
Applies to
All the HTML elements except non-replaced inline elements and table elements.
DOM Syntax
object.style.minWidth = "50px"
CSS min-width Example
Here is another example demonstrating usage of different types of values in min-width property −
<html> <head> <style> .box1 { min-width: 300px; background-color: yellow; padding: 20px; margin-bottom: 5px; } .box2 { min-width: 30%; background-color: lightgrey; padding: 20px; display: inline-block; margin-bottom: 5px; } </style> </head> <body> <div class="box1">This box has a minimum width of 300px</div> <div class="box2">This box has a minimum width of 30%.</div> <div class="box2"> This box has a minimum width of 30%. But the content is larger than the min-width. Hence the value of min-width has no effect. This is a dimensional property which can be styled using CSS. </div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google