HomeContact UsPortfolio

MIN - WIDTH & MAX - WIDTH

Min - width & Max - Width

min - width :

The min-width property in CSS is used to set the minimum width of a specified elemen t.

The min-width property always overrides the width property whether followed before or after width in your declaration.

  • If the content is smaller than the minimum width, then minimum width will be applied.
  • If the content is larger than the minimum width, then min-width property has no effect.

Example :

In the below example, 1st div element takes width of element but 2nd div element’s minimum width is 300px.

<!DOCTYPE html>
<html>
    <head>
        <style>
            h3 {
                color: maroon;
            }
            span {
                background: #020d41;
                color: #ffffff;
                padding: 6px 12px;
            }
            span.example {
                min-width: 300px;
                display: inline-block;
            }
        </style>
    </head>
    
    <body>
      <div>
        <h3>min-width: none (default):</h3>
        <span>Lorem ipsum dolor sit amet...</span>
      </div>
      
      <div>
        <h3>min-width: 300px:</h3>
        <span class="example">Lorem ipsum dolor sit amet...</span>
      </div>
    </body>
</html>

This will produce the following result −

min-width

max - width :

The max-width property in CSS is used to set the maximum width of a specified element.

The max-width property always overrides the width property whether followed before or after width in your declaration.

  • If the content is larger than the maximum width, then maximum width will be applied.
  • If the content is smaller than the maximum width, then max-width property has no effect.

Example :

In the below example, 1st div element takes width of element but 2nd div element’s maximum width is 350px.

<!DOCTYPE html>
<html>
    <head>
        <style>
            h3 {
                color: maroon;
            }
            p {
                background: #020d41;
                color: #ffffff;
                padding: 6px 12px;
            }
            p.example {
                max-width: 350px;
            }
        </style>
    </head>
    
    <body>
        <h3>max-width: none (default):</h3>
        <p>Lorem ipsum dolor sit amet...</p>
        
        <h3>max-width: 350px:</h3>
        <p class="example">Lorem ipsum dolor sit amet...</p>
    </body>
</html>

This will produce the following result −

max-width