CSS min-width

The CSS min-width property is used to define the minimum width to an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{background-color: purple; color: white; margin: 10px 0;}
      div.a{min-width: 120px;}
      div.b{min-width: 220px;}
      div.c{min-width: 220px;}
   </style>
</head>
<body>
   
   <div class="a">Lorem</div>
   <div class="b">Lorem</div>
   <div class="c">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
      Quibusdam minima aperiam reiciendis explicabo ratione quaerat assumenda
      voluptatem magni quasi sint. Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Cupiditate nisi alias sit temporibus labore? Suscipit
      consectetur minus qui.</div>

</body>
</html>

Output

Lorem

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam minima aperiam reiciendis explicabo ratione quaerat assumenda voluptatem magni quasi sint. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate nisi alias sit temporibus labore? Suscipit consectetur minus qui.

CSS min-width Syntax

The syntax of min-width property in CSS, is:

min-width: x;

The value of x should be any of the following:

Length - We can define custom minimum width to an element like 80px, 8cm etc.
initial - Used to use the default value
inherit - Used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »