How Do you Use max Width In CSS

admin_img Posted By Bajarangi soft , Posted On 30-09-2020

As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can),Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container,The element will take up the specified width, and the remaining space will be split equally between the two margins:

Max Width In Css

1.Here is the Example of the Two Div Max-Width

<!DOCTYPE html>
<html>
<head>
    <style>
        div.ex1 {
            width:500px;
            margin: auto;
            border: 3px solid #73AD21;
        }

        div.ex2 {
            max-width:500px;
            margin: auto;
            border: 3px solid #73AD21;
        }
    </style>
</head>
<body>

<div class="ex1">This div element has width: 500px;</div>
<br>

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

<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between
    the two divs!</p>

</body>
</html>

Related Post