CSS min-width

The CSS min-width property is used to define the minimum width of 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
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.

The CSS rules for div elements with various classes are defined in this example. Each div element will have a purple background, white text, and 10-pixel top and bottom margins.

The minimum width for elements with class an is 120 pixels. The minimum width for elements with class b is 220 pixels. Additionally, the minimum width is set to 220 pixels for elements with class c.

Accordingly, elements with class a will have a minimum width of 120 pixels and the ability to grow wider if necessary. Class b and c elements must have a minimum width of 220 pixels, but they can expand if their content calls for more room.

There are three div elements with classes a, b, and c in the HTML code. Each of these elements will have a unique minimum width based on its class, but they will all inherit the styles specified in the CSS rules.

CSS min-width syntax

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

min-width: x;

The value of x should be any of the following:

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!