CSS max-width is a property that sets the maximum width a specific element can have.
If the content inside an element exceeds the set max-width, it will overflow and create horizontal scrollbars. max-width is often used with responsive design to ensure that an element does not become too wide on larger screens, making the content difficult to read or causing other layout issues.
When used in conjunction with width, max-width specifies the maximum width of an element, and width specifies the minimum width.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
This HTML code creates two div elements with the classes "first" and "second" inside the body element. Each div element contains a paragraph element with some Lorem Ipsum text inside.
.first{
width: 800px;
margin: auto;
border: 1px solid red;
}
.second {
max-width: 800px;
margin: auto;
border: 1px solid red;
}
In this CSS code, we have two classes: .first and .second.
The .first class has a fixed width of 800px, a margin set to "auto" (which centers the element horizontally), and a border of 1px solid red.
The .second class has a maximum width of 800px, a margin set to "auto" (which centers the element horizontally), and a border of 1px solid red.
The difference between these two classes is that the .first class has a fixed width, while the .second class has a maximum width. This means that the .second class will resize itself to fit the available width, but will not exceed a width of 800px.
No comments:
Post a Comment