How Do you Use max Width In CSS

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:

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

How To Add Device Screen Height&Width In Flutter App
How Do I Add Margins and Padding and Height/Width in Css
How Do you Use max Width In CSS
How To Use CSS Style Width Properties With JavaScript
How To Design Responsive Card-deck With Fixed Width In Bootstrap
How To Set Div Width to Fit Content Using CSS ?
How To Adjust The Width and Height of I frame to fit With Content In It
How To Configure Modal Width In Bootstrap
Transition Shot hand Width Multiple Properties In Css
Get Device Screen Height Width Using Flutter Android App
How To Design Full Width dropdown Navbar Using Bootstrap