CSS - max-width Property


CSS - max-width Property

  • In CSS, the max-width property defines the maximum width of an html element like <h1>, <h2>, <p> tag etc. 
  • The estimation of the maximum width property can be in a number, length and percentage.

Example: 


{  
    max-width: 150px;
    height: 200px;
    border: 3px solid black;
}

Sample Code:

<!DOCTYPE html>
<html>
    <body>
        <p
style="max-width:30px; height:200px; 
            border:1px solid blue;">
            Welcome To Wikitechy! Best E-Learning Platform!
    </p>
    </body>
</html>

Code Explanation:


    In CSS, max-width property is used to allocate a maximum width for an element. Here we had specified the maximum width of a paragraph tag (p element) as 30 pixels.

    Similarly, height property defines the height of an element. Here we had specified the maximum height for the paragraph text as 200pixels.

    Border property is used to create a border around an element. Border values 1px solid blue defines the border strength, style and color respectively.

Output:


    Here the paragraph text “welcome to wikitechy” have maximum width of 20 pixels and have blue color border around it which is also in 20 pixel width as displayed in the browser window.