CSS-Max-Width
Max-Width
- In CSS, you can set the maximum width of an element using the max-width property. The max-width property specifies the maximum width of an element can have, preventing it from growing larger than the specified value.
- This is particularly useful for responsive web design, as it helps control the layout of your web page on different screen sizes and devices.
Syntax:
max-width: none | length | initial | inherit;
The values of CSS property are defined as:
- none: In CSS, if you want an element to have no maximum width and to be able to grow to the full width available to it, you can use the none value.
- length: The length value specifies the length of max-width in pixels, centimetres, pt, etc.
- initial: It sets the default value.
- inherit: It is used to inherit the property from its parent.
Example:
- In the below example, there are 4 paragraph elements with the content.
- we use the max-width property to set the maximum width of a paragraph.
- first paragraph maximum width is 175px,and second paragraph maximum width is 20em,third paragraph 350pt and 4th paragraph is 10cm.
- The content of the first paragraph is larger than the value of the max-width property, so in the output, as a result, the height of the first paragraph changed automatically.
<!DOCTYPE html>
<html>
<head>
<title>
max-width property
</title>
<style>
p {
border: 4px solid blue;
background-color: lightblue;
font-size: 20px;
}
#px {
max-width: 175px;
}
#em {
max-width: 20em;
}
#pt {
max-width: 350pt;
}
#cm {
max-width: 10cm;
}
</style>
</head>
<body>
<h2> max-width: 175px; </h2>
<p id = "px">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2> max-width: 20em; </h2>
<p id = "em">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2> max-width: 350pt; </h2>
<p id = "pt">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2> max-width: 10cm; </h2>
<p id = "cm">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</body>
</html>
Output: