Difference between max-width and width as well as max-height and height

Question

Aryan Kumar · Answer

The main difference between max-width and width is that max-width sets a maximum width for an element, while width sets the element's actual width. This means that if you set an element's width to 100px, it will always be 100px wide, regardless of the size of the browser window. However, if you set an element's max-width to 100px, it will only be 100px wide if the browser window is less than or equal to 100px wide. If the browser window is larger than 100px, the element will be wider than 100px.

The same principle applies to max-height and height.

Here is an example of how to use max-width and width:

Code snippet

<div style="width: 100px">
  This text will always be 100px wide.
</div>

<div style="max-width: 100px">
  This text will be 100px wide if the browser window is less than or equal to 100px wide.
  If the browser window is larger than 100px, this text will be wider than 100px.
</div>

In this example, the first div will always be 100px wide, no matter how large the browser window is. The second div will only be 100px wide if the browser window is less than or equal to 100px wide. If the browser window is larger than 100px, the second div will be wider than 100px.

You can use max-width and max-height to control the width and height of elements on your website. This can be useful for ensuring that your website looks good on all devices, regardless of the size of the screen.

Anonymous User · Answer

As we know that a block-level element always takes up the full width available (as far as it extends to the left and right).

With max-width we set the maximum width of the element such that it can only span the edges of its max-width size. And the width container specifies the width of the container as to how much space it will occupy that cannot exceed the max-width size of that container.

Here's an example to demonstrate the use of width and max-width.

So, the element will take up the specified width, and the remaining space will be divided equally between the two margins:

The width of this <div> element is 500px, and margin is set to auto.

Note: The problem with the <div> above is when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page.

Using max-width instead will, in this case, improve the handling of the browser's smaller windows. This is important when making the site usable on smaller devices:

This <div> element has a max-width of 500px, and margin is set to auto.

Here is an example of the two div above:

<!DOCTYPE html>

<html>

<head>

    <style>

        div.ex1 {

            width: 600px;

            margin: auto;

            border: 1px solid red;

        }

        div.ex2 {

            max-width: 600px;

            margin: auto;

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <h2>CSS Max-width</h2>

    <div class='ex1'>This div element has width: 600px;</div>

    <br>

    <div class='ex2'>This div element has max-width: 600px;</div>

    <p>

        <strong>Tip:</strong> Drag the browser window to smaller than 600px wide, to see the difference between

        the two divs!

    </p>

</body>

</html>

Hope this scenario will be clear to you now-

Happy Coding!

forum

Difference between max-width and width as well as max-height and height

Can you answer this question?

2 Answers