min width
text less than min width
text exceed so the min width also increase..
Lorem ipsum dolor sit amet, 260px width
Exported from Notepad++
<html><head><style>
span.ex1 {
background-color: yellow; border:1px solid black; min-width: 260px; display: inline-block; <!-- w/o it not works -->
}
.mw { min-width: 260px; background-color: pink; display: inline-block; }
</style></head><body>
<span class="ex1">text less than min width</span></br></br>
<span class="ex1">text exceed so the min width also increase..</span></br></br>
<div class="mw">Lorem ipsum dolor sit amet, 260px width</div>
</body></html>
max width
max-width
if the text is more, than height increase, but fixed width
if the text less , then it has no change
Exported from Notepad++
<html><head>
<title>max-width</title>
<style>
.mx { max-width: 300px; border:3px solid green; }
</style></head><body>
<div class="mx"> if the text is more, than height increase, but fixed width </div></br></br>
<div class="mx"> if the text less , then it has no change </div>
</body>
</html>
min height
min height
if text increase the height increase , but if text is less then min height is 100px
Exported from Notepad++
<html><head><title>min height</title>
<style>
.minh { width: 700px; min-height:100px; border:3px solid red; }
</style></head>
<body><div class="minh">
if text increase the height increase , but if text is less then min height is 100px
</div></body></html>
max height
max height
height will not increase as the text increase, text overflow,height will not increase as the text increase, text overflow, height will not increase as the text increase, text overflow, height will not increase as the text increase, text overflow
Exported from Notepad++
<html><head>
<title>max height</title>
<style>
.mxh { width: 700px; max-height:30px; border:3px solid red; }
</style></head>
<body>
<div class="mxh">height will not increase as the text increase, text overflow,height will not increase as the text increase, text overflow, height will not increase as the text increase, text overflow, height will not increase as the text increase, text overflow</div>
</br></br></br></body></html>