CSS | свойство max-width

Опубликовано: 3 Февраля, 2022

Свойство max-width в CSS используется для определения максимальной ширины элемента. Значение ширины не может быть больше, чем значение max-width. Если содержимое больше максимальной ширины, оно перейдет к следующей строке, а если содержимое меньше максимальной ширины, это не имеет никакого эффекта.

Синтаксис:

 максимальная ширина: нет | длина | начальная | наследование;

Property Values:

none: It is the default value and it does not contains max-width.

Syntax:

max-width: none;

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>max-width property</title>
          
        <!-- max-width CSS property -->
        <style>
            p {
                max-width: none;
                color:white;
                background-color:green;
            }
        </style>
    </head>
      
    <body>
        <p>
            GeeksforGeeks: A computer science portal
        </p>
    </body>
</html>                    

Output:

length: This property is used to set the length of max-width. The length can be set in form of px, cm etc.

Syntax:

max-width: length;

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>max-width property</title>
          
        <!-- max-width CSS property -->
        <style>
            p {
                max-width: 110px;
                color:white;
                background-color:green;
            }
        </style>
    </head>
      
    <body>
        <p>
            GeeksforGeeks: A computer science portal
        </p>
    </body>
</html>                    

Output:

percentage (%): This property is used to set the max-width in form of percentage.

Syntax:

max-width: %;

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>max-width property</title>
          
        <!-- max-width CSS property -->
        <style>
            p {
                max-width: 20%;
                color:white;
                background-color:green;
            }
        </style>
    </head>
      
    <body>
        <p>
            GeeksforGeeks: A computer science portal
        </p>
    </body>
</html>                    

Output:

initial: It is used to set max-width property to its default value.

Syntax:

max-width: initial;

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>max-width property</title>
          
        <!-- max-width CSS property -->
        <style>
            p {
                max-width: initial;
                color:white;
                background-color:green;
            }
        </style>
    </head>
      
    <body>
        <p>
            GeeksforGeeks: A computer science portal
        </p>
    </body>
</html>                    

Output:

inherit: This property is inherited from its parent.

Supported Browsers: The browser supported by max-width property are listed below:

Google Chrome 1.0
Internet Explorer 7.0
Firefox 1.0
Safari 2.0.2
Opera 7.0

Picked CSS

CSS | свойство max-width

РЕКОМЕНДУЕМЫЕ СТАТЬИ