Minimum and Maximum Width Property in CSS


max-width

The max-width property in CSS is used to define the maximum width of an element. The value of the width cannot be larger than the value by max-width. If the content is larger than the max-width then it will go to the next line and if the content is smaller than max-width then it has no effect.

min-width

The min-width property in CSS is used to define the minimum width of an element. The value of the width cannot be less than the value of min-width. If the content specified within the element is smaller, min-width maintains the specified minimum width.

Value used for
length The default value is 0. Defines the minimum width in px, cm, etc
% The defines the minimum width in percent of the containing block

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      box-sizing: border-box;
      border:5px solid red;
      padding: 15px;
      min-width: 300px;
      max-width: 500px;
    }
    img{
      width: 100%;
    }
  </style>
</head>
<body>
  <h1>min-width & max-width in CSS</h1>
  <div>
   <img src="pic.jpg" alt=""> 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe dolorum ab harum necessitatibus exercitationem laudantium et sint! Recusandae numquam quibusdam laborum eveniet iure optio exercitationem perferendis et vero ullam.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe dolorum ab harum necessitatibus exercitationem laudantium et sint! Recusandae numquam quibusdam laborum eveniet iure optio exercitationem perferendis et vero ullam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe dolorum ab harum necessitatibus exercitationem laudantium et sint! Recusandae numquam quibusdam laborum eveniet iure optio exercitationem perferendis et vero ullam.
  </div>
</body>
</html>

Output

Background Attachment

Live Preview


CSS Tutorial


Properties Reference


Cascading Style Sheet


Flexbox Tutorial


CSS Grid Tutorial


Transitions Properties


CSS Properties with Examples


CSS Selectors


CSS Pseudo Elements


CSS Attribute Selectors


Input Pseudo Classes


CSS Examples


CSS Animation Projects