CSS max-width property is used to set maximum width of a box element. Few points to note about max-width
- It cannot be negative.
- If max-width is less that min-width, then min-width value overrides it.
CSS property max-width
| CSS version: | CSS 2.1 |
| Value: | length | percentage | none | inherit |
| Initial: | none |
| Applies to: | all elements but non-replaced inline elements, table rows, and row groups |
| Inherited: | no |
Example – max-width pixel value
<style type="text/css">
.box {
max-width: 100px;
height:100px;
background-color: lightgreen;
}
</style>
<div class="box">
This is some text where max width will not exceed 100px
</div>Example – max-width pecentage value
<style type="text/css">
.outer {
width: 300px;
height:100px;
background-color: lightgray;
}
.box {
max-width: 50%;
height: 100px;
background-color: lightgreen;
}
</style>
<div class="outer">
<div class="box">
This is some text where max width will not exceed 50%
</div>
</div>
